@ledvance/base 1.3.78 → 1.3.79

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}

package/src/components/rect-color-and-bright-picker/utils/storage.ts

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { AsyncStorage } from 'react-native';
+import { TYSdk } from 'tuya-panel-kit';
+
+const getDevKey = (name: string) => {
+  const { devId } = TYSdk.devInfo;
+  return `${devId}_${name}`;
+};
+
+const getPidKey = (name: string) => {
+  const { productId } = TYSdk.devInfo;
+  return `${productId}_${name}`;
+};
+
+const getUiKey = (name: string) => {
+  const { uiId } = TYSdk.devInfo;
+  return `${uiId}_${name}`;
+};
+
+export default {
+  async setItem(key: string, value: any) {
+    const data = { value, type: typeof value };
+    const jsonValue = JSON.stringify(data);
+    return new Promise((resolve, reject) => {
+      AsyncStorage.setItem(key, jsonValue, err => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        resolve('');
+      });
+    });
+  },
+  async setDevItem(name: string, value: any) {
+    const key = getDevKey(name);
+    return this.setItem(key, value);
+  },
+  async setPidItem(name: string, value: any) {
+    const key = getPidKey(name);
+    return this.setItem(key, value);
+  },
+  async setUiItem(name: string, value: any) {
+    const key = getUiKey(name);
+    return this.setItem(key, value);
+  },
+  async getItem(key: string) {
+    return new Promise((resolve, reject) => {
+      AsyncStorage.getItem(key, (err, data) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        if (data) {
+          resolve(JSON.parse(data).value);
+        }
+        resolve(null);
+      });
+    });
+  },
+  async getDevItem(name: string) {
+    const key = getDevKey(name);
+    return this.getItem(key);
+  },
+  async getPidItem(name: string) {
+    const key = getPidKey(name);
+    return this.getItem(key);
+  },
+  async getUiItem(name: string) {
+    const key = getUiKey(name);
+    return this.getItem(key);
+  },
+  async removeItem(key: string) {
+    return new Promise((resolve, reject) => {
+      AsyncStorage.removeItem(key, err => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        resolve('');
+      });
+    });
+  },
+
+  async removeDevItem(name: string) {
+    const key = getDevKey(name);
+    return this.removeItem(key);
+  },
+
+  async removePidItem(name: string) {
+    const key = getDevKey(name);
+    return this.removeItem(key);
+  },
+  async removeUiItem(name: string) {
+    const key = getUiKey(name);
+    return this.removeItem(key);
+  },
+};

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)