@ledvance/base 1.3.103 → 1.3.105

package/src/components/ldvColorSlider.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
 import {LinearGradient, Slider, Utils} from 'tuya-panel-kit'
 import {Rect} from 'react-native-svg'
 import ThemeType from '../config/themeType'
+import { useIsPad } from '../models/modules/NativePropsSlice'
 
-const cx = Utils.RatioUtils.convertX
+const { convertX: cx, width: screenWidth } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
 const temperatures = {
@@ -42,12 +43,56 @@ interface LdvColorSliderProps {
 
 const LdvColorSlider = (props: LdvColorSliderProps) => {
   const {title, type, onSlidingComplete, thumbColor, value} = props
+  const isPad = useIsPad()
   let dataSource = type === TEMP_KEY ? temperatures : colors
   let max = type === TEMP_KEY ? 100 : 359
   let min = type === TEMP_KEY ? 0 : 0
-  const width = props.width || (Utils.RatioUtils.width - cx(80))
+  const width = props.width || (isPad ? cx(screenWidth - 10) : (screenWidth - 80))
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => getStyles(props.theme), [props.theme])
+
+  return (
+    <View style={[styles.container, props.style]}>
+      <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}
+        minimumValue={min}
+        value={value}
+        stepValue={1}
+        canTouchTrack={true}
+        theme={{
+          trackRadius: cx(15),
+        }}
+        onlyMaximumTrack={true}
+        renderMaximumTrack={() => {
+          return (
+            <View style={{flex: 1, borderRadius: cx(15)}}>
+              <LinearGradient
+                style={{...styles.sliderLinearGradient, width}}
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="0%"
+                stops={dataSource}>
+                <Rect {...styles.sliderLinearGradient} width={width}/>
+              </LinearGradient>
+            </View>
+          )
+        }}
+        onValueChange={props.onValueChange}
+        onSlidingComplete={onSlidingComplete}
+      />
+    </View>
+  )
+}
+
+const getStyles = (theme?: ThemeType) =>
+  StyleSheet.create({
     container: {
       height: cx(57),
       flexDirection: 'column',
@@ -56,8 +101,7 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
     title: {
       marginTop: cx(4),
       fontSize: cx(14),
-      color: props.theme?.global.fontColor,
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      color: theme?.global.fontColor,
     },
     shadeSlider: {
       marginTop: cx(8),
@@ -94,44 +138,4 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
     },
   })
 
-  return (
-    <View style={[styles.container, props.style]}>
-      <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}
-        minimumValue={min}
-        value={value}
-        stepValue={1}
-        canTouchTrack={true}
-        theme={{
-          trackRadius: cx(15),
-        }}
-        onlyMaximumTrack={true}
-        renderMaximumTrack={() => {
-          return (
-            <View style={{flex: 1, borderRadius: cx(15)}}>
-              <LinearGradient
-                style={{...styles.sliderLinearGradient, width}}
-                x1="0%"
-                y1="0%"
-                x2="100%"
-                y2="0%"
-                stops={dataSource}>
-                <Rect {...styles.sliderLinearGradient} width={width}/>
-              </LinearGradient>
-            </View>
-          )
-        }}
-        onValueChange={props.onValueChange}
-        onSlidingComplete={onSlidingComplete}
-      />
-    </View>
-  )
-}
-
 export default withTheme(LdvColorSlider)

package/src/composeLayout.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import React, { Component } from 'react'
 import { Provider } from 'react-redux'
 import { DevInfo, DpValue, Theme, TYSdk } from 'tuya-panel-kit'
-import { actions, store } from './models'
+import { actions, store } from '@models'
 import { addListener, nativeEventEmitter, removeListener } from './api/nativeEventEmitter'
 import { getSystemTimeFormat, getTimeZone, NativeApi } from './api/native'
 import {
@@ -10,7 +10,9 @@ import {
   NativeProps,
   setGroupDevices,
   setGroupNativeProps,
-  setNativeProps, setNewPalette,
+  setNativeProps,
+  setNewPalette,
+  setIsPad,
   setSystemTimeFormat,
   setTimeZone,
   UAGroupInfo,
@@ -27,6 +29,7 @@ interface Props {
   uaGroupInfo: UAGroupInfoProps
   colorScheme?: string
   newPalette?: boolean
+  isPad?: boolean
 }
 
 interface LdvDevInfo extends DeviceInfo {
@@ -138,6 +141,7 @@ const composeLayout = (component: React.ComponentType) => {
       })
 
       dispatch(setNewPalette(!!props.newPalette))
+      dispatch(setIsPad(!!props.isPad))
     }
 
     initReduxDeviceNativeProps(ldvDevInfo: LdvDevInfo) {
@@ -162,7 +166,7 @@ const composeLayout = (component: React.ComponentType) => {
         familyName: ldvDevInfo.familyName,
         role: ldvDevInfo.role,
         moods: [],
-        is24HourClock: true
+        is24HourClock: true,
       }
       NativeApi.showObj(nativeProps)
       console.log('Redux 初始数据：', JSON.stringify(nativeProps))