@ledvance/base 1.3.76 → 1.3.77-1

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.3.76",
+  "version": "1.3.77-1",
   "scripts": {
     "prepublishOnly": "python update-localazy.py"
   },

package/src/components/AdvanceCard.tsx

@@ -53,6 +53,8 @@ const AdvanceCard = (props: AdvanceCardProps) => {
       onPress={props.onPress}>
       {!!statusColor && <View style={styles.dotBg}>
           <View
+              accessibilityLabel={"StatusDot"}
+              accessibilityHint={statusColor}
               style={[
                 styles.dot,
                 {backgroundColor: props.data.statusColor},

package/src/components/Card.tsx

@@ -32,7 +32,7 @@ const Card = (props: CardProps) => {
         },
         borderRadius: cx(10),
       }, props.style]}>
-      <TouchableOpacity disabled={!(!!props.onPress)} onPress={props.onPress} onLongPress={props.onLongPress}>
+      <TouchableOpacity accessible={false} disabled={!(!!props.onPress)} onPress={props.onPress} onLongPress={props.onLongPress}>
         <View style={props.containerStyle}>{props.children}</View>
       </TouchableOpacity>
     </View>

package/src/components/Cell.tsx

@@ -17,6 +17,8 @@ interface CellProps {
 export default withTheme(function Cell(props: CellProps) {
   return (
     <TouchableOpacity
+      accessibilityLabel={"Cell"}
+      accessibilityHint={props.value}
       style={[{
         height: cx(50),
         paddingHorizontal: cx(24),

package/src/components/DeleteButton.tsx

@@ -19,6 +19,9 @@ const DeleteButton = (props: DeleteButtonProps) => {
   const { text, onPress, style, textStyle, disabled } = props
   return (
     <TouchableOpacity
+      accessibilityLabel={"DeleteButton"}
+      accessibilityHint={text}
+      accessibilityState={{disabled}}
       disabled={disabled}
       onPress={onPress}
       style={[{

package/src/components/HybridSwitchView.tsx

@@ -91,6 +91,9 @@ const HybridSwitchView = (props: HybridSwitchViewProps) => {
           <View style={styles.container}>
             {props.switchChannels.map((channel, index) => (
               <TouchableOpacity
+                accessibilityLabel={"HybridSwitch"}
+                accessibilityHint={`${index}`}
+                accessibilityState={{checked: channel}}
                 key={index}
                 activeOpacity={Platform.OS === 'ios' ? 0.5 : 0.9}
                 onPress={() => {

package/src/components/OptionGroup.tsx

@@ -71,7 +71,12 @@ const OptionGroup = (props: OptionGroupProps) => {
 
   const OptionItem = (props: OptionItemProps) => {
     return (
-      <TouchableOpacity onPress={() => props.onPress && props.onPress(props.value)}>
+      <TouchableOpacity
+        accessibilityLabel={"OptionItem"}
+        accessibilityHint={props.value}
+        accessibilityState={{checked: props.enable}}
+        onPress={() => props.onPress && props.onPress(props.value)}
+      >
         <View style={styles.itemRoot}>
           <View style={styles.itemTextGroup}>
             <Text style={styles.itemTitle}>{props.title}</Text>

package/src/components/Segmented.tsx

@@ -57,6 +57,9 @@ const Segmented = (props: SegmentedProps) => {
     <View style={[styles.wrap_container, props.style]}>
       {props.options && props.options.map((item, idx) => (
         <TouchableOpacity
+          accessibilityLabel={"Segmented"}
+          accessibilityHint={item.value}
+          accessibilityState={{checked: item.value === props.value}}
           style={[
             styles.segmented_item,
             idx === 0 && styles.segmented_item_first,

package/src/components/SocketItem.tsx

@@ -13,6 +13,7 @@ interface SocketItemProps extends PropsWithChildren<ViewProps>{
   theme?: ThemeType
   title: string
   name: string
+  placeholder?: string
   icon?: any
   disabledEdit?: boolean
   onNameChange: (value: string) => void
@@ -65,12 +66,19 @@ function SocketItem(props: SocketItemProps) {
             onValueChange={props.onSwitchChange} />
         </View>
         <TouchableOpacity
+          accessibilityLabel={"Description"}
+          accessibilityHint={props.name}
           style={styles.nameLine}
           onPress={() => {
             if(props.disabledEdit) return
             Dialog.prompt({
               title: I18n.getLang('routines_add_edit_name'),
               value: props.name,
+              accessibilityLabel: "DialogInput",
+              accessibilityHint: props.name,
+              confirmAccessibilityLabel: "DialogConfirm",
+              cancelAccessibilityLabel: "DialogCancel",
+              placeholder: props.placeholder,
               cancelText: I18n.getLang('auto_scan_system_cancel'),
               confirmText: I18n.getLang('auto_scan_system_wifi_confirm'),
               inputWrapperStyle: {backgroundColor: props.theme?.textInput.background, borderRadius: cx(10)},
@@ -83,7 +91,7 @@ function SocketItem(props: SocketItemProps) {
               },
             })
           }}>
-          <Text style={styles.name}>{props.name}</Text>
+          <Text style={styles.name}>{props.name || props.placeholder}</Text>
         </TouchableOpacity>
         <Spacer height={cx(16)} />
         {props.children}

package/src/components/Stepper.tsx

@@ -111,12 +111,16 @@ const Stepper = (props: StepperProps) => {
   return (
     <View style={[styles.stepperContainer, props.style]}>
       <TouchableOpacity
+        accessibilityLabel={"StepperMinusButton"}
+        accessibilityHint={`${state.value}`}
         style={[styles.stepperButton, props.buttonStyle]}
         onPress={() => handlePress(false)}
       >
         <Image style={styles.stepperIcon} source={{uri: res.ic_minus}} />
       </TouchableOpacity>
       <TextInput
+        accessibilityLabel={"StepperInput"}
+        accessibilityHint={`${state.value}`}
         style={[styles.stepperInput, props.inputStyle]}
         value={state.value.toString()}
         keyboardType="numeric"
@@ -127,6 +131,8 @@ const Stepper = (props: StepperProps) => {
         editable={props.editable || props.disabled}
       />
       <TouchableOpacity
+        accessibilityLabel={"StepperPlusButton"}
+        accessibilityHint={`${state.value}`}
         style={[styles.stepperButton, props.buttonStyle]}
         onPress={() => handlePress(true)}
       >

package/src/components/StripAdjustView.tsx

@@ -6,6 +6,7 @@ import Spacer from "./Spacer";
 import { TabBar, Utils } from "tuya-panel-kit";
 import { ColorDisk } from "@tuya/tuya-panel-lamp-sdk";
 import res from "../res";
+import ThemeType from "../config/themeType";
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
@@ -14,6 +15,7 @@ type TabsNode = {
   title: string
 }
 interface StripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
+  theme?: ThemeType
   lampTabs: TabsNode[]
   activeKey: number | string
   onActiveKeyChange: (key: number | string) => void

package/src/components/Tag.tsx

@@ -50,12 +50,16 @@ const Tag = (props: TagProps) => {
         props.onCheckedChange(!props.checked)
       }}>
       <View style={[styles.root, props.checked ? styles.checked : styles.uncheck, props.style]}>
-        <Text style={[styles.text, {marginEnd: cx(props.checked ? 4 : 12)}]}>{props.text}</Text>
+        <Text
+          accessibilityLabel={"Tag"}
+          accessibilityHint={props.text}
+          accessibilityState={{checked: props.checked}}
+          style={[styles.text, {marginEnd: cx(props.checked ? 4 : 12)}]}
+        >
+          {props.text}
+        </Text>
         {
-          props.checked &&
-            <Image
-                source={{uri: res.ic_arrows_nav_clear}}
-                style={styles.icon}/>
+          props.checked ? <Image source={{uri: res.ic_arrows_nav_clear}} style={styles.icon}/> : <></>
         }
       </View>
     </TouchableOpacity>

package/src/components/TextButton.tsx

@@ -14,6 +14,8 @@ interface TextButtonProps {
 export default function TextButton(props: TextButtonProps) {
   return (
     <TouchableOpacity
+      accessibilityLabel={"TextButton"}
+      accessibilityHint={props.text}
       style={[{
         justifyContent: 'center',
         alignItems: 'center',
@@ -29,4 +31,4 @@ export default function TextButton(props: TextButtonProps) {
       }, props.textStyle]}>{props.text}</Text>
     </TouchableOpacity>
   )
-}
+}

package/src/components/TextField.tsx

@@ -70,14 +70,15 @@ const TextField = (props: TextFieldProps) => {
     <View style={props.style}>
       <Text style={[styles.topTip, { opacity: (!!props.value) ? 1 : 0 }]}>{props.placeholder}</Text>
       <View style={styles.textInputGroup}>
-        <TextInput{...props} style={styles.textInput} />
+        <TextInput {...props} accessibilityLabel={"TextInput"} accessibilityHint={props.value} style={styles.textInput} />
         {!!props.value && editable &&
             <TouchableOpacity
+                accessibilityLabel={"TextInputClearButton"}
                 style={styles.iconTouchable}
                 onPress={() => {
                   props.onChangeText && props.onChangeText('')
                 }}>
-                <Image source={{ uri: res.ic_cancel }} style={styles.icon} />
+                <Image source={{uri: res.ic_cancel}} style={styles.icon}/>
             </TouchableOpacity>
         }
         <View style={styles.line} />

package/src/components/TextFieldStyleButton.tsx

@@ -67,11 +67,11 @@ const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
       <View style={props.style}>
           <View style={styles.tipParent}>
               <Text style={styles.topTip}>{props.placeholder}</Text>
-              {props.showTipIcon && <TouchableOpacity onPress={props.onTipIconPress}>
+              {props.showTipIcon && <TouchableOpacity accessibilityLabel={"TipIcon"} onPress={props.onTipIconPress}>
                   <Image source={{uri: res.ic_info}} style={styles.tipIcon}/>
               </TouchableOpacity>}
           </View>
-          <TouchableOpacity onPress={props.onPress}>
+          <TouchableOpacity accessibilityLabel={"TextFieldStyleButton"} accessibilityHint={props.text} onPress={props.onPress}>
               <View style={styles.textGroup}>
                   <View style={styles.textParent}>
                       <Text style={styles.text}>{props.text}</Text>

package/src/components/UATabs.tsx

@@ -54,6 +54,9 @@ const UATabs = (props: UATabsProps) => {
           const active = props.active === item.value
 
           return <TouchableOpacity
+            accessibilityLabel={"UATabs"}
+            accessibilityHint={item.value}
+            accessibilityState={{checked: active}}
             key={index}
             style={{ flex: 1 }}
             onPress={() => {

package/src/components/ldvColorBrightness.tsx

@@ -7,6 +7,9 @@ export default function LdvColorBrightness(props) {
   const renderBrightness = () => {
     return (
       <LdvSlider
+        accessibilityLabel={"Brightness"}
+        accessibilityHint={`${value}`}
+        max={100}
         min={minBrightness}
         style={props.style}
         title={I18n.getLang('light_sources_tile_dim_lighting_brightness')}
@@ -16,4 +19,4 @@ export default function LdvColorBrightness(props) {
     )
   }
   return renderBrightness()
-}
+}

package/src/components/ldvColorSlider.tsx

@@ -96,10 +96,11 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
 
   return (
     <View style={[styles.container, props.style]}>
-      <Text style={styles.title}>
+      <Text accessibilityLabel={"Color"} accessibilityHint={`${value}`} style={styles.title}>
         {title}
       </Text>
       <Slider.Horizontal
+        accessibilityLabel={"ColorSliderHorizontal"}
         style={{...styles.shadeSlider, width}}
         styles={{track: styles.sliderTrack, thumb: {...styles.shadeThumb, backgroundColor: thumbColor}}}
         maximumValue={max}

package/src/components/ldvPickerView.tsx

@@ -55,6 +55,8 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
     <View key={props.theme?.type} style={[styles.pickerContainer, props.style]}>
       <View style={styles.picContainer}>
         <Picker
+          accessibilityLabel={"HourPicker"}
+          accessibilityHint={hour}
           itemTextColor='#aeadb5'
           style={[styles.picker, styles.pickerLeft]}
           loop={true}
@@ -76,6 +78,8 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
       </View>
       <View style={styles.picContainer}>
         <Picker
+          accessibilityLabel={"MinutePicker"}
+          accessibilityHint={minute}
           itemTextColor='#aeadb5'
           style={[styles.picker, styles.pickerLeft]}
           loop={true}

package/src/components/ldvPresetView.tsx

@@ -59,6 +59,8 @@ const LdvPresetView = (props) => {
     <View style={styles.container}>
       {dataSource.map((item, index) =>
         <TouchableOpacity
+          accessibilityLabel={"PresetNode"}
+          accessibilityHint={`${item.color}`}
           key={index}
           style={[styles.item, {backgroundColor: item.color}]}
           onPress={() => {
@@ -84,4 +86,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default LdvPresetView
+export default LdvPresetView

package/src/components/ldvSaturation.tsx

@@ -8,6 +8,8 @@ const LdvSaturation = (props) => {
   const renderBrightness = () => {
     return (
       <LdvSlider
+        accessibilityLabel={"Saturation"}
+        accessibilityHint={`${value}`}
         style={props.style}
         title={I18n.getLang('light_sources_tile_rgb_lighting_saturation')}
         value={value}
@@ -20,4 +22,4 @@ const LdvSaturation = (props) => {
   return renderBrightness()
 }
 
-export default LdvSaturation
+export default LdvSaturation

package/src/components/ldvSlider.tsx

@@ -1,13 +1,13 @@
 import {useReactive} from 'ahooks'
 import React, {useEffect} from 'react'
-import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native'
+import {AccessibilityProps, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native'
 import {Slider, Utils} from 'tuya-panel-kit'
 import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
-interface LdvSliderProps {
+interface LdvSliderProps extends AccessibilityProps{
   theme?: ThemeType
   title: string,
   value: number,
@@ -77,7 +77,11 @@ const LdvSlider = (props: LdvSliderProps) => {
 
   return (
     <View style={[styles.container, props.style]}>
-      <View style={styles.titleBg}>
+      <View
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityHint={props.accessibilityHint}
+        style={styles.titleBg}
+      >
         <Text style={[styles.title, titleStyle]}>
           {props.title}
         </Text>
@@ -86,6 +90,7 @@ const LdvSlider = (props: LdvSliderProps) => {
         </Text>
       </View>
       <Slider.Horizontal
+        accessibilityLabel={"SliderHorizontal"}
         style={[styles.slider, sliderStyle]}
         styles={{thumb: styles.thumb}}
         maximumValue={mMax}

package/src/components/ldvSwitch.tsx

@@ -23,7 +23,7 @@ interface Prop {
 const LdvSwitch = (props: Prop) => {
   const {title, color, colorAlpha = 0, enable, description, titleStyle, setEnable, leftValue, rightValue, showSwitch = true} = props
   return (
-    <View style={styles.titleBGView}>
+    <View accessibilityLabel={"LdvSwitch"} accessibilityHint={`${color}`} accessibilityState={{checked: enable}} style={styles.titleBGView}>
       <View style={{flexDirection: 'column', flex: 1}}>
         <View style={{flexDirection: 'row', alignItems: 'center'}}>
           <Text style={[styles.title, {color: props.theme?.global.fontColor}, titleStyle]}>{title}</Text>
@@ -33,7 +33,7 @@ const LdvSwitch = (props: Prop) => {
       </View>
       {showSwitch && <>
         {leftValue && <Text style={{color: props.theme?.global.fontColor, marginRight: cx(5)}}>{leftValue}</Text>}
-          <SwitchButton value={enable} onValueChange={setEnable}/>
+          <SwitchButton accessibilityLabel={"SwitchButton"} value={enable} onValueChange={setEnable}/>
         {rightValue && <Text style={{color: props.theme?.global.fontColor, marginLeft: cx(5)}}>{rightValue}</Text>}
       </>
       }

package/src/components/ldvTemperatureSlider.tsx

@@ -24,6 +24,7 @@ interface LdvTemperatureSliderProps {
   style?: StyleProp<ViewStyle> | undefined
   titleStyle?: StyleProp<TextProps> | undefined
   subTitleStr?: string | undefined
+  accessibilityLabel?: string | undefined
 }
 
 const LdvTemperatureSlider = (props: LdvTemperatureSliderProps) => {
@@ -43,11 +44,12 @@ const LdvTemperatureSlider = (props: LdvTemperatureSliderProps) => {
   return (
     <View style={[styles.container, props.style]}>
       <View style={styles.titleBg}>
-        <Text style={[styles.title, titleStyle]}>
+        <Text accessibilityLabel={"Temperature"} accessibilityHint={`${value}`}  style={[styles.title, titleStyle]}>
           {title}
         </Text>
       </View>
       <Slider.Horizontal
+        accessibilityLabel={"TemperatureSliderHorizontal"}
         style={{...styles.shadeSlider, width}}
         styles={{track: styles.sliderTrack, thumb: {...styles.shadeThumb, backgroundColor: thumbColor}}}
         maximumValue={max}
@@ -137,4 +139,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default LdvTemperatureSlider
+export default LdvTemperatureSlider

package/src/components/ldvTopBar.tsx

@@ -29,7 +29,7 @@ const LDVTopBar = (props: TopBarProps) => {
         marginTop: Platform.OS === 'ios' ? Utils.RatioUtils.statusBarHeight : 0,
         justifyContent: 'space-between',
       }}>
-      <TouchableOpacity onPress={props.onBackPress} style={{flex: 1, maxWidth: cx(290)}} >
+      <TouchableOpacity accessibilityLabel={"GoBack"} onPress={props.onBackPress} style={{flex: 1, maxWidth: cx(290)}} >
         <View
           style={{
             flexDirection: 'row',
@@ -52,6 +52,8 @@ const LDVTopBar = (props: TopBarProps) => {
       </TouchableOpacity>
       {!!props.rightButtonIcon &&
           <TouchableOpacity
+              accessibilityLabel={"RightButton"}
+              accessibilityState={{disabled: props.rightButtonDisabled}}
               style={{
                 width: cx(44),
                 height: cx(44),

package/src/components/ldvTopName.tsx

@@ -54,6 +54,7 @@ const LdvTopName = (props: LdvTopNameProps) => {
           /> || null}
         </View>}
         {props.rightIcon && <TouchableOpacity
+            accessibilityLabel={"RightIcon"}
           onPress={props.rightIconClick}>
           <Image
             style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.brand }}

package/src/components/rect-color-and-bright-picker/ColourPicker.tsx

@@ -233,6 +233,8 @@ export default class ColourPicker extends Component<ColourProps, IState> {
     return (
       <View style={[{ flex: 1 }, style]}>
         <RectPicker
+          accessibilityLabel={"RectColorPicker"}
+          accessibilityHint={`${hue}, ${ Math.round(saturation / 10)}`}
           coorToValue={this.coorToValue}
           valueToColor={this.valueToColor}
           valueToCoor={this.valueToCoor}

package/src/components/rect-color-and-bright-picker/RectPicker.tsx

@@ -82,6 +82,8 @@ interface IProps extends DefaultProps {
   valueToCoor: (value: any, originCoor?: Point, validBound?: ValidBound) => Point;
   valueToColor: (value: any) => string;
   initData: (validBound?: ValidBound) => void;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
 }
 
 interface IState {
@@ -377,10 +379,15 @@ export default class RectPicker extends Component<IProps, IState> {
       disabled,
       thumbSize,
       thumbImg,
+      accessibilityLabel,
+      accessibilityHint
     } = this.props;
     const { showPicker, pickerHeight, pickerWidth, thumbPosition } = this;
     return (
       <View
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole={'adjustable'}
         style={[{ flex: 1 }, style]}
         {...this._panResponder.panHandlers}
         pointerEvents="box-only"

package/src/components/rect-color-and-bright-picker/Slider.tsx

@@ -504,7 +504,9 @@ export default class Slider extends React.Component<IProps, IState> {
     return (
       <View
         style={containerStyle}
-        accessibilityLabel="ReactColorPicker_Slider"
+        accessibilityLabel="ReactColorPickerSlider"
+        accessibilityHint={`${this.brightWidth}`}
+        accessibilityRole={'adjustable'}
         onLayout={this.handleLayout}
         pointerEvents="box-only"
         {...this._panResponder.panHandlers}

package/src/components/rect-color-and-bright-picker/WhitePicker.tsx

@@ -325,6 +325,8 @@ export default class WhitePicker extends Component<WhiteProps, IWhite> {
           ref={(ref: RectPicker) => {
             this.pickerRef = ref;
           }}
+          accessibilityLabel={"ReactWhitePicker"}
+          accessibilityHint={`${ Math.round(temperature / 10)}`}
           coorToValue={this.coorToValue}
           valueToColor={this.valueToColor}
           valueToCoor={this.valueToCoor}

package/src/components/segmentControl.tsx

@@ -17,8 +17,11 @@ const SegmentControl = (props) => {
       borderRadius: convertX(8.9),
       flexDirection: 'row',
     }, style]}>
-      <TouchableOpacity style={
-        [{
+      <TouchableOpacity
+        accessibilityLabel={"SegmentControl"}
+        accessibilityHint={title1}
+        accessibilityState={{checked: isFirst}}
+        style={[{
           flex: 1,
           justifyContent: 'center',
           alignItems: 'center',
@@ -26,8 +29,9 @@ const SegmentControl = (props) => {
           borderRadius: convertX(6.9),
         }, isFirst ?
           {backgroundColor: props.theme?.segment.active, margin: convertX(2), borderRadius: 6.9} :
-          {backgroundColor: props.theme?.segment.background}, tabStyle]
-      } onPress={() => setIsFirst(true)}>
+          {backgroundColor: props.theme?.segment.background}, tabStyle]}
+        onPress={() => setIsFirst(true)}
+      >
         <Text
           style={{
             color: props.theme?.segment.fontColor,
@@ -39,6 +43,9 @@ const SegmentControl = (props) => {
         </Text>
       </TouchableOpacity>
       <TouchableOpacity
+        accessibilityLabel={"SegmentControl"}
+        accessibilityHint={title2}
+        accessibilityState={{checked: !isFirst}}
         style={
           [{
             flex: 1,

package/src/components/weekSelect.tsx

@@ -64,6 +64,9 @@ const WeekSelect = (props) => {
       {dataSource.map(period => {
         return (
           <TouchableOpacity
+            accessibilityLabel={"WeekSelect"}
+            accessibilityHint={`${period.index}`}
+            accessibilityState={{checked: period.enabled}}
             key={period.index}
             onPress={() => {
               onSelect(period.index)

package/src/components/ShowSelect.d.ts

@@ -1 +0,0 @@
-export declare const ShowSelectView: (title: any, data: any, defaultValue: any, callback: any) => void;

package/src/components/ShowSelect.tsx

@@ -1,159 +0,0 @@
-import React from 'react'
-import { View, Text, TouchableOpacity, Image } from 'react-native'
-import { Utils, Popup } from 'tuya-panel-kit'
-import res from '@res'
-import Strings from '@i18n'
-
-const { convertX, height } = Utils.RatioUtils
-
-export const ShowSelectView = (title, data, defaultValue, callback) => {
-
-  const renderSelectView = () => {
-    return (
-      <View
-        style={{
-          height: height - convertX(120),
-          backgroundColor: 'rgb(242, 242, 247)',
-          flexDirection: 'column',
-        }}
-      >
-        <View style={{ marginHorizontal: convertX(16), marginVertical: convertX(40),shadow: {
-        shadowColor: '#000000',
-        shadowOpacity: 0.2,
-        shadowRadius: 8,
-        elevation:8,
-        shadowOffset: {
-            width: 0,
-            height: 4,
-        },
-        backgroundColor: '#fff',
-        borderRadius: 8,
-    }, }}>
-          {
-            data.map((item, index) => {
-              if (index === 0) {
-                return (
-                  <View key={item?.id}>
-                    {renderItemView(item, () => {
-                      Popup.close()
-                      callback(item)
-                    })}
-                  </View>
-                )
-              } else {
-                return (
-                  <View key={item?.id}>
-                    {renderLineView()}
-                    {renderItemView(item, () => {
-                      Popup.close()
-                      callback(item)
-                    })}
-                  </View>
-                )
-              }
-            })
-          }
-        </View>
-      </View>
-    )
-  }
-
-  const renderItemView = ({ title }, onPress) => {
-    return (<TouchableOpacity
-      style={{
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        // flex: 1,
-        flexDirection: 'row',
-        height: convertX(44),
-        paddingHorizontal: convertX(12)
-      }}
-      onPress={() => { if (defaultValue !== title) onPress() }}
-    >
-      <View>
-        <Text
-          style={{
-            fontSize: convertX(17),
-            color: '#000',
-          }}
-        >
-          {title}
-        </Text>
-      </View>
-      {defaultValue === title &&
-        <Image
-          style={{ width: convertX(16), height: convertX(16) }}
-          source={{ uri: res.app_music_check}}
-          resizeMode="contain"
-        />}
-    </TouchableOpacity>)
-  }
-
-  const renderLineView = () => {
-    return (<View
-      style={{
-        height: convertX(1),
-        backgroundColor: 'rgba(60, 60, 67, 0.36)',
-        marginLeft: convertX(12)
-      }}
-    ></View>)
-  }
-
-  const titleNode = () => {
-    return (
-      <View style={{ flexDirection: 'row', position: 'relative', height: convertX(81) }}>
-        <TouchableOpacity
-          style={{
-            position: 'absolute',
-            left: convertX(16),
-            bottom: convertX(12),
-            zIndex: 1
-          }}
-          onPress={() => Popup.close()}
-        >
-          <Text
-            style={{
-              fontSize: convertX(17),
-              color: '#FF6600',
-            }}
-          >
-            {Strings.getLang('auto_scan_system_cancel')}
-          </Text>
-        </TouchableOpacity>
-        <View style={{ flexDirection: 'column-reverse', flex: 1, alignItems: 'center' }}>
-          <Text style={{
-            fontSize: convertX(17),
-            fontWeight: 'bold',
-            color: '#000000',
-            paddingBottom: convertX(12)
-          }}>{title}</Text>
-        </View>
-      </View>
-    )
-  }
-
-  Popup.custom({
-    content: renderSelectView(),
-    title: titleNode(),
-    titleTextStyle: {
-      color: '#f60',
-      fontWeight: 'bold',
-      fontFamily: 'helvetica_neue_lt_std_bd',
-      height: convertX(91),
-    },
-    footer: null,
-    footerWrapperStyle: {
-      display: 'none'
-    },
-    cancelText: '',
-    confirmText: '',
-    onMaskPress: ({ close }) => {
-      close()
-    },
-    onConfirm: () => {
-      Popup.close()
-    },
-  })
-
-
-}