@ledvance/base 1.1.83 → 1.1.84

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.1.83",
+  "version": "1.1.84",
   "scripts": {},
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.6",

package/src/api/nativeEventEmitter.ts

@@ -9,7 +9,7 @@ import {
 import {actions} from '@models'
 
 const nativeModule = NativeModules.LDVDeviceEventEmitter
-const nativeEventEmitter = new NativeEventEmitter(nativeModule)
+export const nativeEventEmitter = new NativeEventEmitter(nativeModule)
 
 let deviceDPListener: EmitterSubscription | null
 let groupFeatureListener: EmitterSubscription | null

package/src/components/DrawToolView.tsx

@@ -0,0 +1,225 @@
+import React, { useMemo, useEffect, useCallback } from 'react'
+import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'
+import { Utils, Modal } from 'tuya-panel-kit'
+import { useReactive } from "ahooks"
+import Card from "@ledvance/base/src/components/Card"
+import res from '@ledvance/base/src/res'
+import I18n from '@ledvance/base/src/i18n'
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch'
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
+import Spacer from "@ledvance/base/src/components/Spacer"
+import DeleteButton from "@ledvance/base/src/components/DeleteButton"
+import Stepper from '@ledvance/base/src/components/Stepper'
+const { convertX: cx } = Utils.RatioUtils
+import StripLightView from './StripLightView'
+import { nativeEventEmitter} from '@ledvance/base/src/api/nativeEventEmitter'
+
+export type Node = {
+  color: string,
+  backgroundColor?: string
+}
+
+interface DrawToolViewProps {
+  switchLed?: boolean
+  showEnable?: boolean
+  setEnable: (enable: boolean) => void
+  adjustType?: number   // 1 全选, 2 单选, 3 擦除
+  setAdjustType: (type: number) => void
+  stripStyle?: 'ONLY_LINE' | 'WITH_BEAD'
+  nodes: Node[]
+  fixCount?: number
+  nodeTouch: (idx: number) => void
+  fingerUp: (idxList: string) => void
+  hideLightView?: boolean
+  isSupportColor?: boolean
+  isSupportTemperature?: boolean
+  isSupportBrightness?: boolean
+  isColorMode?: boolean
+  setIsColorMode: (isColorMode: boolean) => void
+  h: number
+  s: number
+  v: number
+  onHSVChange: (h: number, s: number, v: number) => void
+  onHSVChangeComplete: (h: number, s: number, v: number) => void
+  temperature: number
+  brightness: number
+  onCCTChange: (cct: number) => void
+  onCCTChangeComplete: (cct: number) => void
+  onBrightnessChange: (brightness: number) => void
+  onBrightnessChangeComplete: (brightness: number) => void
+  hideLedNum?: boolean
+  ledNum?: number
+  setLedNum: (num: number) => void
+}
+const DrawToolView = (props: DrawToolViewProps) => {
+  const state = useReactive({
+    visible: false,
+    ledNum: props.ledNum || 5,
+    width: 0
+  })
+
+  useEffect(() => {
+    const fingerUp = nativeEventEmitter.addListener('onFingerUp', props.fingerUp)
+
+    const nodeTouched = nativeEventEmitter.addListener('onNodeTouched', props.nodeTouch)
+    return () => {
+      fingerUp.remove()
+      nodeTouched.remove()
+    }
+  }, [])
+
+  const onLayout = (event) => {
+    const { width } = event.nativeEvent.layout
+    state.width = width
+  }
+
+  const height = useMemo(() => {
+    return cx(52 * Math.ceil((props.nodes.length / (props.fixCount || 5))))
+  }, [props.nodes])
+
+  const getBlockColor = useCallback(() => {
+    if (props.isColorMode) {
+      const s = Math.round(mapFloatToRange(props.s / 100, 30, 100))
+      return hsv2Hex(props.h, s, 100)
+    }
+    return '#ffffff'
+  }, [props.isColorMode, props.h, props.s])
+
+  return <Card style={{ marginHorizontal: cx(24) }}>
+    <LdvSwitch
+      title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+      color={'#fff'}
+      colorAlpha={1}
+      enable={!!props.switchLed}
+      showSwitch={!!props.showEnable}
+      setEnable={props.setEnable}
+    />
+    {(props.showEnable && props.switchLed || !props.showEnable) && <>
+      <View style={styles.container}>
+        <View style={styles.adjustButtons}>
+          <TouchableOpacity
+            onPress={() => {
+              props.setAdjustType(1)
+            }}>
+            <Image
+              style={[styles.adjustButton, { tintColor: props.adjustType === 1 ? '#f60' : '#666' }]}
+              source={res.ic_paint_bucket} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => {
+              props.setAdjustType(3)
+            }}>
+            <Image
+              style={[styles.adjustButton, { tintColor: props.adjustType === 3 ? '#f60' : '#666' }]}
+              source={res.ic_disabled_light} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => {
+              props.setAdjustType(2)
+            }}>
+            <Image
+              style={[styles.adjustButton, { tintColor: props.adjustType === 2 ? '#f60' : '#666' }]}
+              source={res.ic_colorize} />
+          </TouchableOpacity>
+          {!props.hideLedNum && <TouchableOpacity
+            onPress={() => {
+              state.visible = true
+            }}
+            style={[styles.adjustButton, { alignItems: 'center', justifyContent: 'center', backgroundColor: '#f60', borderRadius: cx(5) }]}>
+            <Text style={{ color: '#fff', fontSize: cx(18), fontWeight: 'bold' }}>{props.ledNum || 5}</Text>
+          </TouchableOpacity>}
+        </View>
+        <StripLightView
+          style={{ height, flex: 1 }}
+          nodes={JSON.stringify(props.nodes)}
+          fixCount={props.fixCount || 5}
+          stripStyle={props.stripStyle || 'WITH_BEAD'}
+          width={state.width}
+          onLayout={onLayout}
+        />
+      </View>
+      <LdvSwitch
+        title={I18n.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
+        color={getBlockColor()}
+        colorAlpha={1}
+        enable={false}
+        showSwitch={false}
+        setEnable={() => { }}
+      />
+      <LampAdjustView
+        isSupportColor={!!props.isSupportColor}
+        isSupportTemperature={!!props.isSupportTemperature}
+        isSupportBrightness={!!props.isSupportBrightness}
+        isColorMode={!!props.isColorMode}
+        reserveSV={true}
+        setIsColorMode={props.setIsColorMode}
+        h={props.h} s={props.s} v={props.v}
+        onHSVChange={props.onHSVChange}
+        onHSVChangeComplete={props.onHSVChangeComplete}
+        colorTemp={props.temperature}
+        brightness={props.brightness}
+        onCCTChange={props.onCCTChange}
+        onCCTChangeComplete={props.onCCTChangeComplete}
+        onBrightnessChange={props.onBrightnessChange}
+        onBrightnessChangeComplete={props.onBrightnessChangeComplete} />
+      {!props.hideLedNum && <Modal
+        visible={state.visible}
+        onMaskPress={() => {
+          state.visible = false
+        }}
+        alignContainer='center'
+        style={{ width: '100%', height: cx(100) }}
+      >
+        <Card style={{ marginHorizontal: cx(24), marginTop: cx(50), alignItems: 'center' }}>
+          <Spacer />
+          <Stepper
+            min={5}
+            max={48}
+            stepValue={1}
+            editable={true}
+            value={state.ledNum}
+            onValueChange={(v) => {
+              state.ledNum = v
+            }}
+          />
+          <Spacer />
+          <DeleteButton
+            text={I18n.getLang('auto_scan_system_wifi_confirm')}
+            style={{ width: cx(150), height: cx(40), backgroundColor: '#f60' }}
+            textStyle={{ fontSize: cx(14) }}
+            onPress={() => {
+              props.setLedNum(state.ledNum)
+              state.visible = false
+            }}
+          />
+          <Spacer />
+        </Card>
+      </Modal>}
+    </>}
+  </Card>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingLeft: cx(10),
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  title: {
+    color: '#000',
+    fontSize: cx(16),
+    marginLeft: cx(10),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    fontWeight: 'bold',
+  },
+  adjustButtons: {
+    width: cx(50)
+  },
+  adjustButton: {
+    width: cx(44),
+    height: cx(44)
+  }
+})
+
+export default DrawToolView

package/src/components/StripLightView.ts

@@ -0,0 +1,4 @@
+import { requireNativeComponent } from 'react-native'
+const StripLightView = requireNativeComponent('StripLightView');
+
+ export default StripLightView