@ledvance/base 1.3.80 → 1.3.82

package/src/components/OsramFanAdjustView.tsx

@@ -0,0 +1,93 @@
+import React from "react"
+import { View, Text, TouchableOpacity, Image } from "react-native"
+import LdvSwitch from "./ldvSwitch"
+import I18n from "@i18n"
+import LdvSlider from "./ldvSlider"
+import Spacer from "./Spacer"
+import ThemeType from "config/themeType"
+import { Utils } from "tuya-panel-kit"
+import Popup from "./Popup"
+import res from "@res"
+import Segmented from "./Segmented"
+
+const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
+
+interface OsramFanAdjustProps {
+  theme?: ThemeType
+  hideFanSwitch?: boolean
+  fanSwitch: boolean
+  setFanSwitch: (v: boolean) => void
+  fanSpeed: number
+  minSpeed?: number
+  maxSpeed?: number
+  onFanSpeedChange?: (v: number) => void
+  setFanSpeed: (v: number) => void
+  fanMode: 'fresh' | 'nature'
+  setFanMode: (v: 'fresh' | 'nature') => void
+}
+
+const OsramFanAdjustView = (props: OsramFanAdjustProps) => {
+  const { hideFanSwitch = false, fanSwitch, setFanSwitch, fanSpeed, onFanSpeedChange, setFanSpeed, minSpeed = 1, maxSpeed = 3, fanMode, setFanMode } = props
+  return (
+    <View>
+      {
+        !hideFanSwitch && <LdvSwitch
+          title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
+          enable={fanSwitch}
+          setEnable={setFanSwitch}
+        />
+      }
+      {
+        fanSwitch && (
+          <>
+            <LdvSlider
+              title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_text')}
+              subTitleStr={`${fanSpeed}/${maxSpeed}`}
+              value={fanSpeed}
+              min={minSpeed}
+              max={maxSpeed}
+              onValueChange={onFanSpeedChange}
+              onSlidingComplete={setFanSpeed}
+            />
+            <Spacer />
+            <View style={{ marginHorizontal: cx(16) }}>
+              <View style={{ flexDirection: 'row', marginBottom: cx(2), alignItems: 'center' }}>
+                <Text style={{ marginRight: cx(5), color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_tile_uvc_fan_mode')}</Text>
+                <TouchableOpacity onPress={() => Popup({
+                  title: I18n.getLang('ceiling_fan_mode_info_headline'),
+                  confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
+                  content: <View>
+                    <Text style={{
+                      fontWeight: 'bold',
+                      color: props.theme?.global.fontColor,
+                    }}>{I18n.getLang('ceiling_fan_mode_info_description_text')}</Text>
+                    <Spacer />
+                    <Text style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
+                    <Text style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
+                    <Spacer />
+                    <Text style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
+                    <Text style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
+                  </View>,
+                })}>
+                  <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.icon.primary }} source={{ uri: res.ic_info }} />
+                </TouchableOpacity>
+              </View>
+              <Segmented
+                options={[
+                  { label: I18n.getLang('ceiling_fan_tile_uvc_fan_mode_opt_1'), value: 'fresh' },
+                  { label: I18n.getLang('ceiling_fan_tile_uvc_fan_mode_opt_2'), value: 'nature' },
+                ]}
+                value={fanMode}
+                onChange={setFanMode}
+              />
+            </View>
+            <Spacer />
+          </>
+        )
+      }
+    </View>
+  )
+}
+
+export default withTheme(OsramFanAdjustView)

package/src/components/Page.tsx

@@ -70,7 +70,11 @@ const Page = (props: PageProps) => {
 
   return (
     <>
-      <View style={[{ flex: 1, position: 'relative', backgroundColor: props.theme?.global.background }, props.style]}>
+      <View
+        accessibilityLabel='Page'
+        accessibilityHint={props.headlineText} 
+        style={[{ flex: 1, position: 'relative', backgroundColor: props.theme?.global.background }, props.style]}
+      >
         <LDVTopBar
           title={props.backText}
           onBackPress={

package/src/components/Popup.tsx

@@ -26,6 +26,8 @@ const InformationPopup = (props: InformationPopupProps) => {
           }}>{props.title}</Text>
         </View>
         <TouchableOpacity
+          accessibilityLabel='PopupCloseButton'
+          accessibilityHint={props.confirmText}
           style={{
             flexDirection: 'column-reverse',
             alignItems: 'center',

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

@@ -1,6 +1,6 @@
-import {Image, StyleSheet, Text, TouchableOpacity, View, ViewProps} from 'react-native'
+import { Image, StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-native'
 import React from 'react'
-import {Utils} from 'tuya-panel-kit'
+import { Utils } from 'tuya-panel-kit'
 import res from '../res'
 import ThemeType from '../config/themeType'
 
@@ -49,13 +49,17 @@ const Tag = (props: TagProps) => {
       onPress={() => {
         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>
+      <View
+        accessibilityLabel={"Tag"}
+        accessibilityHint={props.text}
+        accessibilityState={{ checked: props.checked }}
+        style={[styles.root, props.checked ? styles.checked : styles.uncheck, props.style]}
+      >
+        <Text 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 accessibilityLabel='TagClearIcon' 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

@@ -10,6 +10,7 @@ import RectPicker, {
 } from './RectPicker';
 import Slider, { IBrightOption } from './Slider';
 import ColorUtils from './utils/color';
+import StorageUtils from './utils/storage';
 
 export interface IWhite {
   brightness: number;
@@ -52,20 +53,38 @@ const defaultProps = {
   onRelease(_v: any, _option?: { isChangeBright: boolean }) {},
   onPress(_v: any, _option?: { isChangeBright: boolean }) {},
 };
+
+interface TempStorageData {
+  temperature: number;
+  position: Point;
+}
+
 type DefaultProps = {
   style?: ViewStyle;
   rectStyle?: ViewStyle;
+  storageKey?: string;
 } & Readonly<typeof defaultProps>;
 
 type WhiteProps = DefaultProps;
 
+let storageKeyIndex = 0;
+
 export default class WhitePicker extends Component<WhiteProps, IWhite> {
   static defaultProps = defaultProps;
 
   constructor(props: WhiteProps) {
     super(props);
-    const { value: { brightness, temperature }, } = this.props;
+    // 是否定义了storageKey
+    const {
+      storageKey,
+      value: { brightness, temperature },
+    } = this.props;
     this.state = { brightness, temperature };
+    if (!storageKey) {
+      this.storageKey = `temperature_key_${storageKeyIndex++}`;
+    } else {
+      this.storageKey = storageKey;
+    }
   }
 
   componentDidUpdate(prevProps: WhiteProps) {
@@ -199,7 +218,26 @@ export default class WhitePicker extends Component<WhiteProps, IWhite> {
   }
 
   initData = async (validBound: ValidBound) => {
+    let cacheEnabled = true;
+    // 尺寸有变化时，不使用缓存
+    if (!_.isEqual(validBound, this.pickerBound)) {
+      cacheEnabled = false;
+    }
+
     const { temperature } = this.state;
+
+    // 获取当前positon的值
+    const data = (await StorageUtils.getDevItem(this.storageKey)) as TempStorageData;
+    // 是否相同色温，相同使用缓存坐标展示
+    if (data && data.temperature === temperature && cacheEnabled) {
+      this.thumbPosition = data.position;
+      this.currentTemperature = temperature;
+    } else {
+      // 根据色温计算位置
+      this.thumbPosition = this.autoTemperaturePosition(temperature, validBound);
+      this.currentTemperature = temperature;
+    }
+
     // 根据色温计算位置
     this.thumbPosition = this.autoTemperaturePosition(temperature, validBound);
     this.currentTemperature = temperature;
@@ -217,6 +255,8 @@ export default class WhitePicker extends Component<WhiteProps, IWhite> {
         validBound
       );
     }
+
+    StorageUtils.setDevItem(this.storageKey, { temperature, position });
     return position;
   }
 
@@ -242,6 +282,7 @@ export default class WhitePicker extends Component<WhiteProps, IWhite> {
       x: normal.x * length + normalVector.originX,
       y: normal.y * length + normalVector.originY,
     };
+    StorageUtils.setDevItem(this.storageKey, { temperature, position });
     return position;
   }
 
@@ -263,6 +304,11 @@ export default class WhitePicker extends Component<WhiteProps, IWhite> {
       }
       return this.handleTemperaturePosition(temperature, validBound);
     }
+
+    StorageUtils.setDevItem(this.storageKey, {
+      temperature,
+      position: origin,
+    });
     this.currentTemperature = temperature;
     this.thumbPosition = origin;
     return origin;
@@ -281,6 +327,7 @@ export default class WhitePicker extends Component<WhiteProps, IWhite> {
   private currentTemperature: number;
   private pickerRef: RectPicker | null;
   private pickerBound: ValidBound;
+  private storageKey: string;
 
   handlePickerGrant = () => {
     const { temperature, brightness } = this.state;
@@ -325,6 +372,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}