@ledvance/base 1.3.5 → 1.3.7

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/localazy.json CHANGED
@@ -871,7 +871,25 @@
871
871
  "MATCH:CO_alertfree",
872
872
  "MATCH:waterleakage_alertfree",
873
873
  "MATCH:mute_smokealarm",
874
- "MATCH:group_energytotal"
874
+ "MATCH:group_energytotal",
875
+ "MATCH:thermostat_title",
876
+ "MATCH:thermostat_tempcurrent",
877
+ "MATCH:thermostat_automode",
878
+ "MATCH:thermostat_powermode",
879
+ "MATCH:thermostat_vacationmode",
880
+ "MATCH:thermostat_triggertimes",
881
+ "MATCH:thermostat_settemp",
882
+ "MATCH:thermostat_startdate",
883
+ "MATCH:thermostat_enddate",
884
+ "MATCH:thermostat_tempsetting",
885
+ "MATCH:thermostat_descriptionvacation",
886
+ "MATCH:thermostat_descriptionrapid",
887
+ "MATCH:thermostat_openwindow",
888
+ "MATCH:thermostat_drifttemp",
889
+ "MATCH:thermostat_difference",
890
+ "MATCH:thermostat_refresh",
891
+ "MATCH:thermostat_quicktemp",
892
+ "MATCH:thermostat_energysaving"
875
893
  ],
876
894
  "replacements": {
877
895
  "REGEX:% %1\\$s.*?\\)%": "{0}",
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "name": "@ledvance/base",
5
5
  "pid": [],
6
6
  "uiid": "",
7
- "version": "1.3.5",
7
+ "version": "1.3.7",
8
8
  "scripts": {
9
9
  "prepublishOnly": "python update-localazy.py"
10
10
  },
@@ -15,6 +15,7 @@ import StripLightView from './StripLightView'
15
15
  import { nativeEventEmitter } from '../api/nativeEventEmitter'
16
16
 
17
17
  const { convertX: cx } = Utils.RatioUtils
18
+ const { withTheme } = Utils.ThemeUtils
18
19
 
19
20
  export type Node = {
20
21
  color: string,
@@ -22,6 +23,7 @@ export type Node = {
22
23
  }
23
24
 
24
25
  interface DrawToolViewProps extends PropsWithChildren<ViewProps> {
26
+ theme?: any
25
27
  title?: string
26
28
  switchLed?: boolean
27
29
  showEnable?: boolean
@@ -103,134 +105,157 @@ const DrawToolView = (props: DrawToolViewProps) => {
103
105
  const s = Math.round(mapFloatToRange(props.s / 100, 30, 100))
104
106
  return hsv2Hex(props.h, s, 100)
105
107
  }
106
- return '#ffffff'
108
+ return props.theme.card.background
107
109
  }, [props.isColorMode, props.h, props.s])
108
110
 
109
111
  const ledNumValidator = (num?: number) => {
110
112
  return num && Number.isInteger(num) && num >= 5 && num <= 48;
111
113
  }
112
114
 
115
+
116
+ const styles = StyleSheet.create({
117
+ container: {
118
+ paddingLeft: cx(10),
119
+ flexDirection: 'row',
120
+ alignItems: 'center',
121
+ },
122
+ title: {
123
+ color: props.theme.global.fontColor,
124
+ fontSize: cx(16),
125
+ marginLeft: cx(10),
126
+ fontFamily: 'helvetica_neue_lt_std_bd',
127
+ fontWeight: 'bold',
128
+ },
129
+ adjustButtons: {
130
+ width: cx(50),
131
+ },
132
+ adjustButton: {
133
+ width: cx(44),
134
+ height: cx(44),
135
+ },
136
+ })
137
+
113
138
  return (
114
139
  <Card style={{ marginHorizontal: cx(24) }}>
115
140
  <LdvSwitch
116
141
  title={props.title || I18n.getLang('light_sources_tile_tw_lighting_headline')}
117
- color={'#fff'}
142
+ color={props.theme.card.background}
118
143
  colorAlpha={1}
119
144
  enable={!!props.switchLed}
120
145
  showSwitch={!!props.showEnable}
121
146
  setEnable={props.setEnable} />
122
147
  {(props.showEnable && props.switchLed || !props.showEnable) && <>
123
- <View style={styles.container}>
124
- <View style={styles.adjustButtons}>
125
- <TouchableOpacity
126
- onPress={() => {
127
- props.setAdjustType(1)
128
- }}>
129
- <Image
130
- style={[styles.adjustButton, { tintColor: props.adjustType === 1 ? '#f60' : '#666' }]}
131
- source={res.ic_paint_bucket} />
132
- </TouchableOpacity>
133
- {!props.hideDisableLight && <TouchableOpacity
134
- onPress={() => {
135
- props.setAdjustType(3)
136
- }}>
137
- <Image
138
- style={[styles.adjustButton, { tintColor: props.adjustType === 3 ? '#f60' : '#666' }]}
139
- source={res.ic_disabled_light} />
140
- </TouchableOpacity>}
141
- {!props.hideColorize && <TouchableOpacity
142
- onPress={() => {
143
- props.setAdjustType(2)
144
- }}>
145
- <Image
146
- style={[styles.adjustButton, { tintColor: props.adjustType === 2 ? '#f60' : '#666' }]}
147
- source={res.ic_colorize} />
148
- </TouchableOpacity>}
149
- {!props.hideLedNum && <TouchableOpacity
150
- onPress={() => {
151
- state.visible = true
152
- }}
153
- style={[styles.adjustButton, {
154
- alignItems: 'center',
155
- justifyContent: 'center',
156
- backgroundColor: '#f60',
157
- borderRadius: cx(5),
158
- }]}>
159
- <Text style={{ color: '#fff', fontSize: cx(18), fontWeight: 'bold' }}>{props.ledNum || 5}</Text>
160
- </TouchableOpacity>}
148
+ <View style={styles.container}>
149
+ <View style={styles.adjustButtons}>
150
+ <TouchableOpacity
151
+ onPress={() => {
152
+ props.setAdjustType(1)
153
+ }}>
154
+ <Image
155
+ style={[styles.adjustButton, { tintColor: props.adjustType === 1 ? props.theme.icon.primary : props.theme.icon.normal }]}
156
+ source={res.ic_paint_bucket} />
157
+ </TouchableOpacity>
158
+ {!props.hideDisableLight && <TouchableOpacity
159
+ onPress={() => {
160
+ props.setAdjustType(3)
161
+ }}>
162
+ <Image
163
+ style={[styles.adjustButton, { tintColor: props.adjustType === 3 ? props.theme.icon.primary : props.theme.icon.normal }]}
164
+ source={res.ic_disabled_light} />
165
+ </TouchableOpacity>}
166
+ {!props.hideColorize && <TouchableOpacity
167
+ onPress={() => {
168
+ props.setAdjustType(2)
169
+ }}>
170
+ <Image
171
+ style={[styles.adjustButton, { tintColor: props.adjustType === 2 ? props.theme.icon.primary : props.theme.icon.normal }]}
172
+ source={res.ic_colorize} />
173
+ </TouchableOpacity>}
174
+ {!props.hideLedNum && <TouchableOpacity
175
+ onPress={() => {
176
+ state.visible = true
177
+ }}
178
+ style={[styles.adjustButton, {
179
+ alignItems: 'center',
180
+ justifyContent: 'center',
181
+ backgroundColor: props.theme.icon.primary,
182
+ borderRadius: cx(5),
183
+ }]}>
184
+ <Text style={{ color: props.theme.global.fontColor, fontSize: cx(18), fontWeight: 'bold' }}>{props.ledNum || 5}</Text>
185
+ </TouchableOpacity>}
186
+ </View>
187
+ <StripLightView
188
+ style={{ height, flex: 1 }}
189
+ nodes={props.nodes}
190
+ fixCount={props.fixCount || 5}
191
+ stripStyle={props.stripStyle || 'WITH_BEAD'}
192
+ touchingMode={props.touchingMode || 'TOUCH'}
193
+ width={state.width}
194
+ onLayout={onLayout} />
161
195
  </View>
162
- <StripLightView
163
- style={{ height, flex: 1 }}
164
- nodes={props.nodes}
165
- fixCount={props.fixCount || 5}
166
- stripStyle={props.stripStyle || 'WITH_BEAD'}
167
- touchingMode={props.touchingMode || 'TOUCH'}
168
- width={state.width}
169
- onLayout={onLayout} />
170
- </View>
171
- <LdvSwitch
172
- title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
173
- color={props.blockColor || getBlockColor()}
174
- colorAlpha={1}
175
- enable={false}
176
- showSwitch={false}
177
- setEnable={() => {
178
- }} />
196
+ <LdvSwitch
197
+ title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
198
+ color={props.blockColor || getBlockColor()}
199
+ colorAlpha={1}
200
+ enable={false}
201
+ showSwitch={false}
202
+ setEnable={() => {
203
+ }} />
179
204
  {!props.hidLampAdjustView && <LampAdjustView
180
- isSupportColor={!!props.isSupportColor}
181
- isSupportTemperature={!!props.isSupportTemperature}
182
- isSupportBrightness={!!props.isSupportBrightness}
183
- isColorMode={!!props.isColorMode}
184
- reserveSV={true}
185
- minSaturation={1}
186
- setIsColorMode={props.setIsColorMode}
187
- h={props.h} s={props.s} v={props.v}
188
- onHSVChange={props.onHSVChange}
189
- onHSVChangeComplete={props.onHSVChangeComplete}
190
- colorTemp={props.temperature}
191
- brightness={props.brightness}
192
- onCCTChange={props.onCCTChange}
193
- onCCTChangeComplete={props.onCCTChangeComplete}
194
- onBrightnessChange={props.onBrightnessChange}
195
- onBrightnessChangeComplete={props.onBrightnessChangeComplete} />}
205
+ isSupportColor={!!props.isSupportColor}
206
+ isSupportTemperature={!!props.isSupportTemperature}
207
+ isSupportBrightness={!!props.isSupportBrightness}
208
+ isColorMode={!!props.isColorMode}
209
+ reserveSV={true}
210
+ minSaturation={1}
211
+ setIsColorMode={props.setIsColorMode}
212
+ h={props.h} s={props.s} v={props.v}
213
+ onHSVChange={props.onHSVChange}
214
+ onHSVChangeComplete={props.onHSVChangeComplete}
215
+ colorTemp={props.temperature}
216
+ brightness={props.brightness}
217
+ onCCTChange={props.onCCTChange}
218
+ onCCTChangeComplete={props.onCCTChangeComplete}
219
+ onBrightnessChange={props.onBrightnessChange}
220
+ onBrightnessChangeComplete={props.onBrightnessChangeComplete} />}
196
221
  {!props.hideLedNum && <Modal
197
- visible={state.visible}
198
- onMaskPress={() => {
199
- state.visible = false
200
- }}
201
- alignContainer="center"
202
- style={{ width: '100%', height: cx(150) }}>
203
- <Card
204
- containerStyle={{ marginHorizontal: cx(16), alignItems: 'center' }}
205
- style={{ marginHorizontal: cx(16), marginTop: cx(50) }}>
206
- <Spacer />
207
- <Text style={{ color: '#000', fontSize: cx(14) }}>{I18n.getLang('string_lights_set_bulbs_title')}</Text>
208
- <Spacer height={cx(10)}/>
209
- <Text style={{color: '#999'}}>{I18n.getLang('string_lights_set_bulbs_description_text')}</Text>
210
- <Spacer />
211
- <Stepper
212
- min={5}
213
- max={48}
214
- isBeyond={true}
215
- stepValue={1}
216
- editable={true}
217
- value={state.ledNum}
218
- isRealTime={true}
219
- onValueChange={(v) => {
220
- state.ledNum = v
221
- }} />
222
- <Spacer />
223
- <DeleteButton
224
- text={I18n.getLang('auto_scan_system_wifi_confirm')}
225
- style={{ width: cx(150), height: cx(40), backgroundColor: ledNumValidator(state.ledNum) ? '#f60' : '#666' }}
226
- textStyle={{ fontSize: cx(14) }}
227
- onPress={() => {
228
- if (!ledNumValidator(state.ledNum)) return
229
- props.setLedNum(state.ledNum)
230
- state.visible = false
231
- }} />
232
- <Spacer />
233
- </Card>
222
+ visible={state.visible}
223
+ onMaskPress={() => {
224
+ state.visible = false
225
+ }}
226
+ alignContainer="center"
227
+ style={{ width: '100%', height: cx(150) }}>
228
+ <Card
229
+ containerStyle={{ marginHorizontal: cx(16), alignItems: 'center' }}
230
+ style={{ marginHorizontal: cx(16), marginTop: cx(50) }}>
231
+ <Spacer />
232
+ <Text style={{ color: props.theme.global.fontColor, fontSize: cx(14) }}>{I18n.getLang('string_lights_set_bulbs_title')}</Text>
233
+ <Spacer height={cx(10)}/>
234
+ <Text style={{color: props.theme.global.secondFontColor}}>{I18n.getLang('string_lights_set_bulbs_description_text')}</Text>
235
+ <Spacer />
236
+ <Stepper
237
+ min={5}
238
+ max={48}
239
+ isBeyond={true}
240
+ stepValue={1}
241
+ editable={true}
242
+ value={state.ledNum}
243
+ isRealTime={true}
244
+ onValueChange={(v) => {
245
+ state.ledNum = v
246
+ }} />
247
+ <Spacer />
248
+ <DeleteButton
249
+ text={I18n.getLang('auto_scan_system_wifi_confirm')}
250
+ style={{ width: cx(150), height: cx(40), backgroundColor: ledNumValidator(state.ledNum) ? props.theme.button.primary : props.theme.button.disabled }}
251
+ textStyle={{ fontSize: cx(14) }}
252
+ onPress={() => {
253
+ if (!ledNumValidator(state.ledNum)) return
254
+ props.setLedNum(state.ledNum)
255
+ state.visible = false
256
+ }} />
257
+ <Spacer />
258
+ </Card>
234
259
  </Modal>}
235
260
  {props.children}
236
261
  </>}
@@ -239,26 +264,5 @@ const DrawToolView = (props: DrawToolViewProps) => {
239
264
  )
240
265
  }
241
266
 
242
- const styles = StyleSheet.create({
243
- container: {
244
- paddingLeft: cx(10),
245
- flexDirection: 'row',
246
- alignItems: 'center',
247
- },
248
- title: {
249
- color: '#000',
250
- fontSize: cx(16),
251
- marginLeft: cx(10),
252
- fontFamily: 'helvetica_neue_lt_std_bd',
253
- fontWeight: 'bold',
254
- },
255
- adjustButtons: {
256
- width: cx(50),
257
- },
258
- adjustButton: {
259
- width: cx(44),
260
- height: cx(44),
261
- },
262
- })
263
267
 
264
- export default DrawToolView
268
+ export default withTheme(DrawToolView)
@@ -11,8 +11,10 @@ import Segmented from './Segmented'
11
11
  import Popup from './Popup'
12
12
 
13
13
  const {convertX: cx} = Utils.RatioUtils
14
+ const { withTheme } = Utils.ThemeUtils
14
15
 
15
16
  interface FanAdjustViewProps extends ViewProps {
17
+ theme?: any
16
18
  hideEnable?: boolean
17
19
  fanEnable: boolean
18
20
  fanSpeed: number
@@ -45,11 +47,11 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
45
47
  return (
46
48
  <View>
47
49
  {!props.hideEnable && <LdvSwitch
48
- title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
49
- enable={props.fanEnable}
50
- setEnable={props.onFanSwitch}
51
- color={''}
52
- colorAlpha={1}/>}
50
+ title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
51
+ enable={props.fanEnable}
52
+ setEnable={props.onFanSwitch}
53
+ color={''}
54
+ colorAlpha={1}/>}
53
55
  {props.fanEnable && (
54
56
  <View>
55
57
  <LdvSlider
@@ -67,7 +69,7 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
67
69
  <View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
68
70
  <Text style={{
69
71
  marginRight: cx(5),
70
- color: '#000',
72
+ color: props.theme.global.fontColor,
71
73
  }}>{I18n.getLang('ceiling_fan_tile_uvc_fan_direction')}</Text>
72
74
  <TouchableOpacity onPress={() => Popup({
73
75
  title: I18n.getLang('ceiling_fan_direction_info_headline'),
@@ -75,17 +77,17 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
75
77
  content: <View>
76
78
  <Text style={{
77
79
  fontWeight: 'bold',
78
- color: '#000',
80
+ color: props.theme.global.fontColor,
79
81
  }}>{I18n.getLang('ceiling_fan_direction_info_description_text')}</Text>
80
82
  <Spacer/>
81
- <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_1_headline')}</Text>
82
- <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_1_text')}</Text>
83
+ <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_1_headline')}</Text>
84
+ <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_1_text')}</Text>
83
85
  <Spacer/>
84
- <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_2_headline')}</Text>
85
- <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_2_text')}</Text>
86
+ <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_2_headline')}</Text>
87
+ <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_2_text')}</Text>
86
88
  </View>,
87
89
  })}>
88
- <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={res.ic_info}/>
90
+ <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.icon.primary}} source={res.ic_info}/>
89
91
  </TouchableOpacity>
90
92
  </View>
91
93
  <Segmented
@@ -98,24 +100,24 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
98
100
 
99
101
  {props.fanEnable && props.isSupportMode && <View style={{marginHorizontal: cx(16)}}>
100
102
  <View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
101
- <Text style={{marginRight: cx(5), color: '#000'}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_mode')}</Text>
103
+ <Text style={{marginRight: cx(5), color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_mode')}</Text>
102
104
  <TouchableOpacity onPress={() => Popup({
103
105
  title: I18n.getLang('ceiling_fan_mode_info_headline'),
104
106
  confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
105
107
  content: <View>
106
108
  <Text style={{
107
109
  fontWeight: 'bold',
108
- color: '#000',
110
+ color: props.theme.global.fontColor,
109
111
  }}>{I18n.getLang('ceiling_fan_mode_info_description_text')}</Text>
110
112
  <Spacer/>
111
- <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
112
- <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
113
+ <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
114
+ <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
113
115
  <Spacer/>
114
- <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
115
- <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
116
+ <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
117
+ <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
116
118
  </View>,
117
119
  })}>
118
- <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={res.ic_info}/>
120
+ <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.icon.primary}} source={res.ic_info}/>
119
121
  </TouchableOpacity>
120
122
  </View>
121
123
  <Segmented
@@ -139,4 +141,4 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
139
141
  )
140
142
  }
141
143
 
142
- export default FanAdjustView
144
+ export default withTheme(FanAdjustView)
@@ -3,6 +3,7 @@ import {Text, TouchableOpacity, View} from 'react-native'
3
3
  import {Popup, Utils} from 'tuya-panel-kit'
4
4
 
5
5
  const {convertX: cx, height} = Utils.RatioUtils
6
+ const { withTheme } = Utils.ThemeUtils
6
7
 
7
8
  interface InformationPopupProps {
8
9
  title: string
@@ -11,16 +12,14 @@ interface InformationPopupProps {
11
12
  }
12
13
 
13
14
  const InformationPopup = (props: InformationPopupProps) => {
14
- console.log(props, '< --- props')
15
-
16
- const titleNode = () => {
15
+ const TitleNode = withTheme(({theme}: {theme?: any}) => {
17
16
  return (
18
17
  <View style={{flexDirection: 'row', height: cx(80), justifyContent: 'space-between'}}>
19
18
  <View style={{flexDirection: 'column-reverse', flex: 1, alignItems: 'center', paddingLeft: cx(12)}}>
20
19
  <Text style={{
21
20
  fontSize: cx(16),
22
21
  fontWeight: 'bold',
23
- color: '#000000',
22
+ color: theme.global.fontColor,
24
23
  paddingBottom: cx(12),
25
24
 
26
25
  }}>{props.title}</Text>
@@ -37,7 +36,7 @@ const InformationPopup = (props: InformationPopupProps) => {
37
36
  <Text
38
37
  style={{
39
38
  fontSize: cx(12),
40
- color: '#FF6600',
39
+ color: theme.button.primary,
41
40
  }}
42
41
  >
43
42
  {props.confirmText}
@@ -45,13 +44,13 @@ const InformationPopup = (props: InformationPopupProps) => {
45
44
  </TouchableOpacity>
46
45
  </View>
47
46
  )
48
- }
47
+ })
49
48
 
50
49
  Popup.custom({
51
50
  content: <View style={{height: height - cx(80), padding: cx(24)}}>
52
51
  {props.content}
53
52
  </View>,
54
- title: titleNode(),
53
+ title: <TitleNode />,
55
54
  footer: null,
56
55
  confirmText: '',
57
56
  cancelText: '',
@@ -65,8 +64,6 @@ const InformationPopup = (props: InformationPopupProps) => {
65
64
  display: 'none',
66
65
  },
67
66
  })
68
-
69
-
70
67
  }
71
68
 
72
- export default InformationPopup
69
+ export default InformationPopup
@@ -3,6 +3,7 @@ import {StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native'
3
3
  import {Utils} from 'tuya-panel-kit'
4
4
 
5
5
  const {convertX: cx} = Utils.RatioUtils
6
+ const { withTheme } = Utils.ThemeUtils
6
7
 
7
8
  interface SegmentedItem {
8
9
  label: ReactNode
@@ -10,6 +11,7 @@ interface SegmentedItem {
10
11
  }
11
12
 
12
13
  interface SegmentedProps {
14
+ theme?: any
13
15
  value?: string | number
14
16
  options?: SegmentedItem[]
15
17
  onChange?: (v: string | number) => void
@@ -17,6 +19,39 @@ interface SegmentedProps {
17
19
  }
18
20
 
19
21
  const Segmented = (props: SegmentedProps) => {
22
+ const styles = StyleSheet.create({
23
+ wrap_container: {
24
+ flexDirection: 'row',
25
+ height: cx(42),
26
+ backgroundColor: props.theme.segment.background,
27
+ padding: cx(2),
28
+ borderRadius: cx(8),
29
+ },
30
+ segmented_item: {
31
+ flex: 1,
32
+ alignItems: 'center',
33
+ justifyContent: 'center',
34
+ backgroundColor: props.theme.container.background,
35
+ },
36
+ segmented_item_first: {
37
+ borderBottomLeftRadius: cx(8),
38
+ borderTopLeftRadius: cx(8),
39
+ },
40
+ segmented_item_last: {
41
+ borderBottomRightRadius: cx(8),
42
+ borderTopRightRadius: cx(8),
43
+ },
44
+ segmented_item_check: {
45
+ backgroundColor: props.theme.button.primary,
46
+ },
47
+ segmented_text: {
48
+ fontSize: cx(16),
49
+ color: props.theme.global.secondFontColor,
50
+ },
51
+ segmented_text_check: {
52
+ color: props.theme.button.fontColor,
53
+ },
54
+ })
20
55
  return (
21
56
  <View style={[styles.wrap_container, props.style]}>
22
57
  {props.options && props.options.map((item, idx) => (
@@ -40,38 +75,4 @@ const Segmented = (props: SegmentedProps) => {
40
75
  )
41
76
  }
42
77
 
43
- export default Segmented
44
-
45
- const styles = StyleSheet.create({
46
- wrap_container: {
47
- flexDirection: 'row',
48
- height: cx(42),
49
- backgroundColor: '#f6f6f6',
50
- padding: cx(2),
51
- borderRadius: cx(8),
52
- },
53
- segmented_item: {
54
- flex: 1,
55
- alignItems: 'center',
56
- justifyContent: 'center',
57
- backgroundColor: '#fff',
58
- },
59
- segmented_item_first: {
60
- borderBottomLeftRadius: cx(8),
61
- borderTopLeftRadius: cx(8),
62
- },
63
- segmented_item_last: {
64
- borderBottomRightRadius: cx(8),
65
- borderTopRightRadius: cx(8),
66
- },
67
- segmented_item_check: {
68
- backgroundColor: '#f60',
69
- },
70
- segmented_text: {
71
- fontSize: cx(16),
72
- color: '#999',
73
- },
74
- segmented_text_check: {
75
- color: '#fff',
76
- },
77
- })
78
+ export default withTheme(Segmented)