@ledvance/base 1.3.62 → 1.3.65

package/package.json

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

package/src/components/ColorAdjustView.tsx

@@ -1,11 +1,20 @@
 import {View} from 'react-native'
-import React from 'react'
+import React, {useCallback} from 'react'
 import LdvColorSlider from './ldvColorSlider'
 import {hex2Hsv, hsv2Hex} from '../utils'
 import LdvPresetView from './ldvPresetView'
 import LdvSaturation from './ldvSaturation'
 import LdvColorBrightness from './ldvColorBrightness'
 import I18n from '../i18n/index'
+import RectColorAndBrightPicker from './rect-color-and-bright-picker'
+import {Utils} from "tuya-panel-kit";
+import {useReactive, useUpdateEffect} from "ahooks";
+import {useNewPalette} from "../models/modules/NativePropsSlice";
+
+const cx = Utils.RatioUtils.convertX
+const scaleUp = (value) => value * 10
+const scaleDown = (value) => Math.round(value / 10)
+const width = Utils.RatioUtils.width - cx(80)
 
 export interface ColorAdjustViewProps {
   h: number
@@ -19,7 +28,59 @@ export interface ColorAdjustViewProps {
   onHSVChangeComplete: (h: number, s: number, v: number) => void
 }
 
-const ColorAdjustView = (props: ColorAdjustViewProps) => {
+const NewColorPicker = React.memo((props: ColorAdjustViewProps) => {
+  const { h = 0, s = 100, v = 100, minBrightness = 10, onHSVChange, onHSVChangeComplete } = props
+  const state = useReactive({
+    hue: h,
+    saturation: scaleUp(s),
+    value: scaleUp(v),
+    moving: false
+  })
+
+  useUpdateEffect(() => {
+    if (!state.moving) {
+      state.hue = h
+      state.saturation = scaleUp(s)
+      state.value = scaleUp(v)
+    }
+  }, [h, s, v])
+
+  const handleMove = useCallback((v) => {
+    onHSVChange?.(v.hue, scaleDown(v.saturation), scaleDown(v.value))
+  }, [onHSVChange])
+
+  const handleComplete = useCallback((v) => {
+    onHSVChangeComplete?.(v.hue, scaleDown(v.saturation), scaleDown(v.value))
+    state.moving = false
+  }, [onHSVChangeComplete])
+
+  const { hue, saturation, value } = state;
+  const hsv = { hue, saturation, value };
+
+  return (
+    <View style={{justifyContent: 'center', alignItems: 'center'}}>
+      <View style={{
+        width: width,
+        height: cx(200),
+        borderRadius: cx(10),
+        borderColor: '#eeeeef',
+        borderWidth: 1,
+        overflow: 'hidden'
+      }}>
+        <RectColorAndBrightPicker.ColourPicker
+          value={hsv}
+          brightOption={{min: minBrightness, minPercent: minBrightness ? 1 : 0}}
+          onGrant={() => state.moving = true}
+          onMove={handleMove}
+          onRelease={handleComplete}
+          onPress={handleComplete}
+        />
+      </View>
+    </View>
+  )
+})
+
+const OldColorPicker = React.memo((props: ColorAdjustViewProps) => {
   return (
     <View>
       <LdvColorSlider
@@ -42,14 +103,14 @@ const ColorAdjustView = (props: ColorAdjustViewProps) => {
           }
         }}/>
       {!props.hideSat && <LdvSaturation
-        value={props.s}
-        minSaturation={props.minSaturation}
-        onValueChange={s => {
-          props.onHSVChange && props.onHSVChange(props.h, s, props.v)
-        }}
-        onSlidingComplete={s => {
-          props.onHSVChangeComplete(props.h, s, props.v)
-        }}/>}
+          value={props.s}
+          minSaturation={props.minSaturation}
+          onValueChange={s => {
+            props.onHSVChange && props.onHSVChange(props.h, s, props.v)
+          }}
+          onSlidingComplete={s => {
+            props.onHSVChangeComplete(props.h, s, props.v)
+          }}/>}
       <LdvColorBrightness
         minBrightness={props.minBrightness}
         value={props.v}
@@ -61,6 +122,11 @@ const ColorAdjustView = (props: ColorAdjustViewProps) => {
         }}/>
     </View>
   )
+})
+
+const ColorAdjustView = (props: ColorAdjustViewProps) => {
+  const newPalette = useNewPalette()
+  return newPalette ? <NewColorPicker {...props} /> : <OldColorPicker {...props} />
 }
 
-export default ColorAdjustView
+export default ColorAdjustView

package/src/components/ColorTempAdjustView.tsx

@@ -1,5 +1,5 @@
 import {View} from 'react-native'
-import React from 'react'
+import React, {useCallback} from 'react'
 import LdvColorSlider from './ldvColorSlider'
 import Spacer from './Spacer'
 import LdvPresetView from './ldvPresetView'
@@ -7,13 +7,17 @@ import LdvSlider from './ldvSlider'
 import {Utils} from 'tuya-panel-kit'
 import I18n from '../i18n/index'
 import {cctToColor} from '../utils/cctUtils'
-import ThemeType from '../config/themeType'
+import RectColorAndBrightPicker from "./rect-color-and-bright-picker";
+import {useReactive, useUpdateEffect} from 'ahooks'
+import { useNewPalette } from 'models/modules/NativePropsSlice'
 
 const {convertX: cx} = Utils.RatioUtils
-const { withTheme } = Utils.ThemeUtils
+
+const scaleUp = (value: number) => value * 10;
+const scaleDown = (value: number) => Math.round(value / 10);
+const width = Utils.RatioUtils.width - cx(80);
 
 export interface ColorTempAdjustViewProps {
-  theme?: ThemeType
   colorTemp: number
   brightness: number
   minBrightness?: number
@@ -25,7 +29,67 @@ export interface ColorTempAdjustViewProps {
   onBrightnessChangeComplete: (brightness: number) => void
 }
 
-const ColorTempAdjustView = (props: ColorTempAdjustViewProps) => {
+const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
+  const {
+    colorTemp = 0,
+    brightness = 100,
+    isSupportTemperature,
+    onCCTChange,
+    onCCTChangeComplete,
+    onBrightnessChange,
+    onBrightnessChangeComplete,
+  } = props
+  const state = useReactive({
+    temperature: scaleUp(colorTemp),
+    brightness: scaleUp(brightness),
+    moving: false
+  })
+
+  useUpdateEffect(() => {
+    if (!state.moving) {
+      state.temperature = scaleUp(colorTemp)
+      state.brightness = scaleUp(brightness)
+    }
+  }, [colorTemp, brightness])
+
+  const handleMove = useCallback((v) => {
+    onCCTChange?.(scaleDown(v.temperature))
+    onBrightnessChange?.(scaleDown(v.brightness))
+  }, [onCCTChange, onBrightnessChange])
+
+  const handleComplete = useCallback((v) => {
+    onCCTChangeComplete?.(scaleDown(v.temperature))
+    onBrightnessChangeComplete?.(scaleDown(v.brightness))
+    state.moving = false
+  }, [onCCTChangeComplete, onBrightnessChangeComplete])
+
+  const { temperature, brightness: stateBrightness } = state
+  const white = { temperature, brightness: stateBrightness }
+
+  return (
+    <View style={{justifyContent: 'center', alignItems: 'center'}}>
+      <View style={{
+        width: width,
+        height: cx(isSupportTemperature? 200 : 50),
+        borderRadius: cx(10),
+        borderColor: '#eeeeef',
+        borderWidth: 1,
+        overflow: 'hidden'
+      }}>
+        <RectColorAndBrightPicker.WhitePicker
+          hideTemp={!isSupportTemperature}
+          value={white}
+          onGrant={() => state.moving = true}
+          onMove={handleMove}
+          onRelease={handleComplete}
+          onPress={handleComplete}
+        />
+      </View>
+    </View>
+  )
+})
+
+const OldColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
   return (
     <View>
       {props.isSupportTemperature &&
@@ -56,6 +120,11 @@ const ColorTempAdjustView = (props: ColorTempAdjustViewProps) => {
               onSlidingComplete={props.onBrightnessChangeComplete}/>}
     </View>
   )
+})
+
+const ColorTempAdjustView = (props: ColorTempAdjustViewProps) => {
+  const newPalette = useNewPalette()
+  return newPalette ? <NewColorTempPicker {...props} /> : <OldColorTempPicker {...props} />
 }
 
-export default withTheme(ColorTempAdjustView)
+export default ColorTempAdjustView

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

@@ -0,0 +1,266 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { View, ViewStyle, StyleProp } from 'react-native';
+import RectPicker, { ValidBound, Point, defaultProps as baseDefault } from './RectPicker';
+import Slider, { IBrightOption } from './Slider';
+import ColorUtils from './utils/color';
+
+
+export const rectGradientBg = [
+  {
+    colors: [
+      { offset: '0%', stopColor: '#FF0000', stopOpacity: 1 },
+      { offset: '8%', stopColor: '#FF7F00', stopOpacity: 1 },
+      { offset: '20%', stopColor: '#FFFF00', stopOpacity: 1 },
+      { offset: '25%', stopColor: '#7FFF00', stopOpacity: 1 },
+      { offset: '33%', stopColor: '#00FF00', stopOpacity: 1 },
+      { offset: '42%', stopColor: '#00FF7F', stopOpacity: 1 },
+      { offset: '50%', stopColor: '#00FFFF', stopOpacity: 1 },
+      { offset: '58%', stopColor: '#007FFF', stopOpacity: 1 },
+      { offset: '66%', stopColor: '#0000FF', stopOpacity: 1 },
+      { offset: '75%', stopColor: '#7F00FF', stopOpacity: 1 },
+      { offset: '83%', stopColor: '#FF00FF', stopOpacity: 1 },
+      { offset: '92%', stopColor: '#FF007F', stopOpacity: 1 },
+      { offset: '100%', stopColor: '#FF0000', stopOpacity: 1 },
+    ],
+  },
+  {
+    x2: '0%',
+    y2: '100%',
+    colors: [
+      { offset: '0%', stopColor: '#fff', stopOpacity: 1 },
+      { offset: '16%', stopColor: '#fff', stopOpacity: 0.9 },
+      { offset: '100%', stopColor: '#fff', stopOpacity: 0 },
+    ],
+  },
+];
+
+export interface IHsv {
+  hue: number;
+  saturation: number;
+  value: number;
+}
+
+const defaultProps = {
+  ...baseDefault,
+  /**
+   * 值
+   */
+  value: { hue: 0, saturation: 1000, value: 1000 } as IHsv,
+  /**
+   * 色度偏量
+   */
+  hueOffset: 1,
+  /**
+   * 亮度配置
+   */
+  brightOption: {} as IBrightOption,
+  /**
+   * 是否隐藏亮度调节
+   */
+  hideBright: false,
+  /**
+   * 失去焦点时的亮度滑动条颜色
+   */
+  lossSliderColor: 'rgba(255,255,255,0.4)',
+  /**
+   * 背景渐变配置
+   */
+  bgs: rectGradientBg,
+  /**
+   * 滑动开始事件
+   * @param _v
+   * @param _option
+   */
+  onGrant(_v: any, _option?: { isChangeBright: boolean }) {},
+  /**
+   * 滑动过程事件
+   * @param _v
+   * @param _option
+   */
+  onMove(_v: any, _option?: { isChangeBright: boolean }) {},
+  /**
+   * 滑动结束事件
+   * @param _v
+   * @param _option
+   */
+  onRelease(_v: any, _option?: { isChangeBright: boolean }) {},
+  /**
+   * 点击事件
+   * @param _v
+   * @param _option
+   * @version ^0.3.0
+   */
+  onPress(_v: any, _option?: { isChangeBright: boolean }) {},
+};
+
+type DefaultProps = Readonly<typeof defaultProps>;
+
+type ColourProps = {
+  /**
+   * 组件的样式
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * 颜色选择区的样式
+   */
+  rectStyle?: StyleProp<ViewStyle>;
+} & DefaultProps;
+
+type IState = IHsv;
+
+export default class ColourPicker extends Component<ColourProps, IState> {
+  static defaultProps: DefaultProps = defaultProps;
+  constructor(props: ColourProps) {
+    super(props);
+    this.state = { ...this.props.value };
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(nextProps: ColourProps) {
+    if (!_.isEqual(nextProps.value, this.props.value)) {
+      this.setState({ ...nextProps.value });
+    }
+  }
+
+  shouldComponentUpdate(nextProps: ColourProps, nextState: IState) {
+    return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
+  }
+
+  onBrightGrant = () => {
+    const { hue, saturation, value } = this.state;
+    this.firPropsEvent(this.props.onGrant, { hue, saturation, value }, { isChangeBright: true });
+  };
+
+  onBrightMove = (value: number) => {
+    const { hue, saturation } = this.state;
+    this.firPropsEvent(this.props.onMove, { hue, saturation, value }, { isChangeBright: true });
+  };
+
+  onBrightRelease = (value: number) => {
+    const { hue, saturation } = this.state;
+    this.setState({ value });
+    this.firPropsEvent(this.props.onRelease, { hue, saturation, value }, { isChangeBright: true });
+  };
+
+  onBrightPress = (value: number) => {
+    const { hue, saturation } = this.state;
+    this.setState({ value });
+    this.firPropsEvent(this.props.onPress, { hue, saturation, value }, { isChangeBright: true });
+  };
+
+  coorToValue = ({ x, y }: Point, validBound: ValidBound) => {
+    const { hueOffset } = this.props;
+    const { width, height, x: validStartX, y: validStartY } = validBound;
+    const { value } = this.state;
+    let hue = Math.round(((x - validStartX) / width) * 360 + hueOffset) % 360;
+    const saturation = Math.round(((y - validStartY) / height) * 1000);
+
+    // hueOffset 不等于0时，最左边与最右边的值一样，为确保不会滑到最左边时跳到最右边
+    // 滑到最左边时，hue + 1;
+    if (hueOffset !== 0) {
+      if (Math.abs(x - validStartX) < 1) {
+        hue += 1;
+      }
+    }
+
+    return { hue, saturation, value };
+  };
+
+  valueToCoor = (hsv: IHsv, _origin: Point, validBound: ValidBound): Point => {
+    const { hueOffset } = this.props;
+    const { width, height, x: validStartX, y: validStartY } = validBound;
+    const { hue, saturation } = hsv;
+    let x = ((hue - hueOffset) / 360) * width;
+    if (x <= 0) {
+      x = width + x;
+    }
+    const y = (saturation / 1000) * height;
+
+    return { x: x + validStartX, y: y + validStartY };
+  };
+
+  valueToColor = (hsv: IHsv): string => {
+    const { hue, saturation, value } = hsv;
+    return ColorUtils.hsv2rgba(hue!, saturation, value) || 'transparent';
+  };
+
+  firPropsEvent(cb: (params?: any) => void, ...args: any[]) {
+    typeof cb === 'function' && cb(...args);
+  }
+
+  handlePickerGrant = () => {
+    const { hue, saturation, value } = this.state;
+    this.firPropsEvent(this.props.onGrant, { hue, saturation, value });
+  };
+
+  handlePickerMove = (hsv: IHsv) => {
+    this.firPropsEvent(this.props.onMove, hsv);
+  };
+
+  handlePickerRelease = (hsv: IHsv) => {
+    this.setState({ ...hsv });
+    this.firPropsEvent(this.props.onRelease, hsv);
+  };
+
+  handlePickerPress = (hsv: IHsv) => {
+    this.setState({ ...hsv });
+    this.firPropsEvent(this.props.onPress, hsv);
+  };
+
+  initData = async () => {};
+  render() {
+    const {
+      style,
+      rectStyle,
+      brightOption,
+      lossShow,
+      lossSliderColor,
+      clickEnabled,
+      hideBright,
+      opacityAnimationValue,
+      opacityAnimationDuration,
+      ...pickerProps
+    } = this.props;
+    const { hue, saturation, value: bright } = this.state;
+    const sliderProps: any = {};
+    if (lossShow) {
+      sliderProps.activeColor = lossSliderColor;
+    }
+    return (
+      <View style={[{ flex: 1 }, style]}>
+        <RectPicker
+          coorToValue={this.coorToValue}
+          valueToColor={this.valueToColor}
+          valueToCoor={this.valueToCoor}
+          value={{ hue, saturation, value: bright }}
+          lossShow={lossShow}
+          clickEnabled={clickEnabled}
+          opacityAnimationValue={opacityAnimationValue}
+          opacityAnimationDuration={opacityAnimationDuration}
+          {...pickerProps}
+          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}
+            value={bright}
+            clickEnabled={clickEnabled}
+            onGrant={this.onBrightGrant}
+            onMove={this.onBrightMove}
+            onRelease={this.onBrightRelease}
+            onPress={this.onBrightPress}
+          />
+        )}
+      </View>
+    );
+  }
+}