@ledvance/base 1.3.62 → 1.3.63

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

@@ -0,0 +1,400 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { View, ViewStyle } from 'react-native';
+import StorageUtils from './utils/storage';
+import RectPicker, {
+  ValidBound,
+  ILinear,
+  ILinearColors,
+  Point,
+  defaultProps as baseDefault,
+} from './RectPicker';
+import Slider, { IBrightOption } from './Slider';
+import ColorUtils from './utils/color';
+
+export interface IWhite {
+  brightness: number;
+  temperature: number;
+}
+const defaultProps = {
+  ...baseDefault,
+  brightOption: {} as IBrightOption,
+  value: { brightness: 500, temperature: 500 } as IWhite,
+  lossSliderColor: 'rgba(255,255,255,0.4)',
+  hideTemp: false,
+  hideBright: false,
+  /**
+   * 排布方向
+   * leftBottom 对角线， 0在左下角
+   * leftTop 对角线, 0在左上角
+   * rightBottom 反向对角线, 0在右下角
+   * rightTop 反向对角线, 0在右上角
+   * left 从左往右，0在左边
+   * right 从右往左，0在右边
+   * top 从上往下，0在上边
+   * bottom 从下往上，0在下边
+   * @version ^0.3.0
+   */
+  direction: 'left' as
+    | 'leftBottom'
+    | 'leftTop'
+    | 'rightBottom'
+    | 'rightTop'
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'bottom',
+  bgs: [
+    { offset: '0%', stopColor: '#FFCA5C', stopOpacity: 1 },
+    { offset: '60%', stopColor: '#FFFFFF', stopOpacity: 1 },
+    { offset: '100%', stopColor: '#CDECFE', stopOpacity: 1 },
+  ] as ILinearColors[],
+  onGrant(v: any, option?: { isChangeBright: boolean }) {},
+  onMove(v: any, option?: { isChangeBright: boolean }) {},
+  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);
+    // 是否定义了storageKey
+    const {
+      storageKey,
+      value: { brightness, temperature },
+    } = this.props;
+    this.state = { brightness, temperature };
+    if (!storageKey) {
+      this.storageKey = `temperature_key_${storageKeyIndex++}`;
+    } else {
+      this.storageKey = storageKey;
+    }
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(nextProps: WhiteProps) {
+    const {
+      value: { temperature, brightness },
+    } = nextProps;
+    if (temperature !== this.props.value.temperature) {
+      this.setState({ temperature });
+      this.thumbPosition = this.autoTemperaturePosition(temperature);
+      this.currentTemperature = temperature;
+    }
+    if (brightness !== this.props.value.brightness && brightness !== this.state.brightness) {
+      this.setState({ brightness });
+    }
+  }
+
+  shouldComponentUpdate(nextProps: WhiteProps, nextState: IWhite) {
+    return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
+  }
+
+  onBrightGrant = () => {
+    const { brightness, temperature } = this.state;
+    this.firPropsEvent(this.props.onGrant, { brightness, temperature }, { isChangeBright: true });
+  };
+
+  onBrightMove = (brightness: number) => {
+    const { temperature } = this.state;
+    this.firPropsEvent(this.props.onMove, { temperature, brightness }, { isChangeBright: true });
+  };
+
+  onBrightRelease = (brightness: number) => {
+    const { temperature } = this.state;
+    this.setState({ temperature, brightness });
+    this.firPropsEvent(this.props.onRelease, { temperature, brightness }, { isChangeBright: true });
+  };
+
+  onBrightPress = (brightness: number) => {
+    const { temperature } = this.state;
+    this.setState({ temperature, brightness });
+    this.firPropsEvent(this.props.onPress, { temperature, brightness }, { isChangeBright: true });
+  };
+
+  getBgs() {
+    const { direction, bgs } = this.props;
+    // left bottom
+    let x1 = '0%';
+    let y1 = '100%';
+    let x2 = '100%';
+    let y2 = '0%';
+    switch (direction) {
+      case 'leftTop':
+        x1 = '0%';
+        y1 = '0%';
+        x2 = '100%';
+        y2 = '100%';
+        break;
+      case 'rightBottom':
+        x1 = '100%';
+        y1 = '100%';
+        x2 = '0%';
+        y2 = '0%';
+        break;
+      case 'rightTop':
+        x1 = '100%';
+        y1 = '0%';
+        x2 = '0%';
+        y2 = '100%';
+        break;
+      case 'left':
+        x1 = '0%';
+        y1 = '0%';
+        x2 = '100%';
+        y2 = '0%';
+        break;
+      case 'right':
+        x1 = '100%';
+        y1 = '0%';
+        x2 = '0%';
+        y2 = '0%';
+        break;
+      case 'top':
+        x1 = '0%';
+        y1 = '0%';
+        x2 = '0%';
+        y2 = '100%';
+        break;
+      case 'bottom':
+        x1 = '0%';
+        y1 = '100%';
+        x2 = '0%';
+        y2 = '0%';
+        break;
+
+      default:
+        break;
+    }
+
+    return [{ x1, y1, x2, y2, colors: bgs }] as ILinear[];
+  }
+
+  getNormalVector({ width, height, x, y }: ValidBound) {
+    switch (this.props.direction) {
+      case 'leftTop':
+        return { x: width, y: height, originX: x, originY: y };
+      case 'rightBottom':
+        return { x: -width, y: -height, originX: width + x, originY: height + y };
+      case 'rightTop':
+        return { x: -width, y: height, originX: width + x, originY: y };
+      case 'left':
+        return { x: width, y: 0, originX: x, originY: height / 2 + y };
+      case 'right':
+        return { x: -width, y: 0, originX: width + x, originY: height / 2 + y };
+      case 'top':
+        return { x: 0, y: height, originX: width / 2 + x, originY: y };
+      case 'bottom':
+        return { x: 0, y: -height, originX: width / 2 + x, originY: height + y };
+      default:
+        return { x: width, y: -height, originX: x, originY: height + y };
+    }
+  }
+
+  setValue({ temperature, brightness }: IWhite) {
+    this.thumbPosition = this.autoTemperaturePosition(temperature);
+    this.currentTemperature = temperature;
+    this.setState({ temperature, brightness });
+  }
+
+  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;
+    this.pickerBound = validBound;
+  };
+
+  autoTemperaturePosition(temperature: number, validBound?: any) {
+    let position;
+    if (this.pickerRef) {
+      position = this.pickerRef.valueToCoor({ temperature });
+    } else {
+      position = this.valueToCoor(
+        { temperature, brightness: this.state.brightness },
+        null,
+        validBound
+      );
+    }
+    // StorageUtils.setDevItem(this.storageKey, { temperature, position });
+    return position;
+  }
+
+  coorToValue = ({ x, y }: Point, bound: ValidBound) => {
+    const { brightness } = this.state;
+    // 获取基准向量
+    const normalVector = this.getNormalVector(bound);
+    const vector1 = { x: x - normalVector.originX, y: y - normalVector.originY };
+    // 对角线的长度
+    const total = Math.sqrt(normalVector.x ** 2 + normalVector.y ** 2);
+    const diff = (vector1.x * normalVector.x + vector1.y * normalVector.y) / total;
+    const temperature = Math.round((diff / total) * 1000);
+    return { temperature, brightness };
+  };
+
+  handleTemperaturePosition(temperature: number, bound: ValidBound) {
+    //  获取基准向量
+    const normalVector = this.getNormalVector(bound);
+    const total = Math.sqrt(normalVector.x ** 2 + normalVector.y ** 2);
+    const normal = { x: normalVector.x / total, y: normalVector.y / total };
+    const length = total * (temperature / 1000);
+    const position = {
+      x: normal.x * length + normalVector.originX,
+      y: normal.y * length + normalVector.originY,
+    };
+    // StorageUtils.setDevItem(this.storageKey, { temperature, position });
+    return position;
+  }
+
+  valueToCoor = ({ temperature }: IWhite, origin: Point, validBound: ValidBound): Point => {
+    // origin 不存在时，不在滑动时候
+    if (!origin) {
+      let cacheEnabled = true;
+      if (!_.isEqual(validBound, this.pickerBound)) {
+        cacheEnabled = false;
+      }
+      if (this.currentTemperature === temperature && cacheEnabled) {
+        if (
+          this.thumbPosition &&
+          typeof this.thumbPosition.x === 'number' &&
+          this.thumbPosition.x >= 0
+        ) {
+          return this.thumbPosition;
+        }
+      }
+      return this.handleTemperaturePosition(temperature, validBound);
+    }
+    // StorageUtils.setDevItem(this.storageKey, {
+    //   temperature,
+    //   position: origin,
+    // });
+    this.currentTemperature = temperature;
+    this.thumbPosition = origin;
+    return origin;
+  };
+
+  valueToColor = (data: IWhite): string => {
+    const { temperature, brightness } = data;
+    return ColorUtils.brightKelvin2rgba(brightness, temperature);
+  };
+
+  firPropsEvent(cb: (params?: any) => void, ...args: any[]) {
+    typeof cb === 'function' && cb(...args);
+  }
+
+  private thumbPosition: Point;
+  private currentTemperature: number;
+  private pickerRef: RectPicker;
+  private storageKey: string;
+  private pickerBound: ValidBound;
+
+  handlePickerGrant = () => {
+    const { temperature, brightness } = this.state;
+    this.firPropsEvent(this.props.onGrant, { temperature, brightness });
+  };
+
+  handlePickerMove = (white: IWhite) => {
+    this.firPropsEvent(this.props.onMove, white);
+  };
+
+  handlePickerRelease = (white: IWhite) => {
+    this.setState({ ...white });
+    this.firPropsEvent(this.props.onRelease, white);
+  };
+
+  handlePickerPress = (white: IWhite) => {
+    this.setState({ ...white });
+    this.firPropsEvent(this.props.onPress, white);
+  };
+
+  render() {
+    const {
+      style,
+      rectStyle,
+      brightOption,
+      lossShow,
+      lossSliderColor,
+      clickEnabled,
+      hideTemp,
+      hideBright,
+      opacityAnimationValue,
+      opacityAnimationDuration,
+      ...pickerProps
+    } = this.props;
+    const { temperature, brightness } = this.state;
+    const sliderProps: any = {};
+    if (lossShow) {
+      sliderProps.activeColor = lossSliderColor;
+    }
+    return (
+      <View style={[{ flex: 1 }, style]}>
+        {!hideTemp && (<RectPicker
+          ref={(ref: RectPicker) => {
+            this.pickerRef = ref;
+          }}
+          coorToValue={this.coorToValue}
+          valueToColor={this.valueToColor}
+          valueToCoor={this.valueToCoor}
+          value={{ temperature, brightness }}
+          lossShow={lossShow}
+          clickEnabled={clickEnabled}
+          opacityAnimationValue={opacityAnimationValue}
+          opacityAnimationDuration={opacityAnimationDuration}
+          {...pickerProps}
+          bgs={this.getBgs()}
+          style={rectStyle}
+          onGrant={this.handlePickerGrant}
+          onMove={this.handlePickerMove}
+          onRelease={this.handlePickerRelease}
+          onPress={this.handlePickerPress}
+          initData={this.initData}
+        />)}
+        {!hideBright && (
+          <Slider
+            opacityAnimationValue={opacityAnimationValue}
+            opacityAnimationDuration={opacityAnimationDuration}
+            {...brightOption}
+            {...sliderProps}
+            clickEnabled={clickEnabled}
+            value={brightness}
+            onGrant={this.onBrightGrant}
+            onMove={this.onBrightMove}
+            onRelease={this.onBrightRelease}
+            onPress={this.onBrightPress}
+          />
+        )}
+      </View>
+    );
+  }
+}

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

@@ -0,0 +1,5 @@
+import ColourPicker from './ColourPicker';
+import WhitePicker from './WhitePicker';
+import Slider from './Slider';
+
+export default { ColourPicker, WhitePicker, BrightnessSlider: Slider };

package/src/components/rect-color-and-bright-picker/res/index.ts

@@ -0,0 +1,3 @@
+export default {
+  thumbMask: require('./thumb-mask.png'),
+};

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

@@ -0,0 +1,73 @@
+/* eslint-disable func-names */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Utils } from 'tuya-panel-kit';
+import ColorObj from 'color';
+
+const { color: ColorUtils } = Utils.ColorUtils;
+
+ColorUtils.temp2rgb = function (
+  kelvin: number,
+  { temperatureMin = 4000, temperatureMax = 8000 } = {}
+) {
+  let newKelvin = kelvin;
+  newKelvin /= 10; // 0 - 1000 范围
+  const temp = temperatureMin + ((temperatureMax - temperatureMin) * newKelvin) / 100;
+  const hsv = this.rgb2hsv(...this.kelvin2rgb(temp));
+  return this.hsv2RgbString(...hsv);
+};
+
+ColorUtils.brightKelvin2rgb = function (
+  bright = 1000,
+  kelvin = 1000,
+  { temperatureMin = 4000, temperatureMax = 8000 } = {}
+) {
+  let newKelvin = kelvin;
+  let newBright = bright;
+  newBright /= 10;
+  newKelvin /= 10;
+  const temp = temperatureMin + ((temperatureMax - temperatureMin) * newKelvin) / 100;
+  const hsv = this.rgb2hsv(...this.kelvin2rgb(temp));
+  const brightV = newBright;
+  hsv[2] = brightV;
+  return this.hsv2RgbString(...hsv);
+};
+
+ColorUtils.bright2Opacity = (
+  brightness: number,
+  option: { min: number; max: number } = { min: 0.2, max: 1 }
+) => {
+  const { min = 0.2, max = 1 } = option;
+  return Math.round((min + ((brightness - 10) / (1000 - 10)) * (max - min)) * 100) / 100;
+};
+
+/**
+ * 格式化hsv
+ * 亮度将转化为透明度变化
+ */
+ColorUtils.hsv2rgba = function (hue: number, saturation: number, bright: number) {
+  try {
+    let color: string = ColorUtils.hsb2hex(hue, saturation / 10, 100);
+    // @ts-ignore
+    color = new ColorObj(color as string).alpha(this.bright2Opacity(bright)).rgbString();
+    return color;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(error);
+    return 'transparent';
+  }
+};
+
+ColorUtils.brightKelvin2rgba = function (bright: number, kelvin: number) {
+  try {
+    let color = ColorUtils.brightKelvin2rgb(1000, kelvin || 0);
+    // @ts-ignore
+    color = new ColorObj(color).alpha(this.bright2Opacity(bright)).rgbString();
+    return color;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(error);
+    return 'transparent';
+  }
+};
+
+export default ColorUtils;

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/weekSelect.tsx

@@ -8,10 +8,6 @@ const { withTheme } = Utils.ThemeUtils
 
 const repeatPeriod = [
   {
-    index: 1,
-    title: I18n.getLang('timeschedule_add_schedule_weekday7_text'),
-    enabled: false,
-  }, {
     index: 2,
     title: I18n.getLang('timeschedule_add_schedule_weekday1_text'),
     enabled: false,
@@ -35,14 +31,18 @@ const repeatPeriod = [
     index: 7,
     title: I18n.getLang('timeschedule_add_schedule_weekday6_text'),
     enabled: false,
+  }, {
+    index: 1,
+    title: I18n.getLang('timeschedule_add_schedule_weekday7_text'),
+    enabled: false,
   },
 ]
 
-export const setDataSource = (loop) => {
-  return repeatPeriod.map((item, index) => {
+export const setDataSource = (loop: number[] | string[] | string) => {
+  return repeatPeriod.map(item => {
     return {
       ...item,
-      enabled: loop[index] === 1,
+      enabled: [1, '1'].includes(loop[item.index - 1]),
     }
   })
 }

package/src/composeLayout.tsx

@@ -10,7 +10,7 @@ import {
   NativeProps,
   setGroupDevices,
   setGroupNativeProps,
-  setNativeProps,
+  setNativeProps, setNewPalette,
   setSystemTimeFormat,
   setTimeZone,
   UAGroupInfo,
@@ -26,6 +26,7 @@ interface Props {
   ldvDevInfo: LdvDevInfo
   uaGroupInfo: UAGroupInfoProps
   colorScheme?: string
+  newPalette?: boolean
 }
 
 interface LdvDevInfo extends DeviceInfo {
@@ -130,6 +131,8 @@ const composeLayout = (component: React.ComponentType) => {
       getTimeZone().then(timeZone => {
         dispatch(setTimeZone(timeZone))
       })
+
+      dispatch(setNewPalette(!!props.newPalette))
     }
 
     initReduxDeviceNativeProps(ldvDevInfo: LdvDevInfo) {