@ledvance/base 1.2.82 → 1.2.83

package/src/components/Stepper.tsx

@@ -1,130 +1,130 @@
-import { exchangeNumber, localeNumber } from "@ledvance/base/src/utils/common";
-import res from "@res";
-import { useReactive } from "ahooks";
-import React, { memo, useCallback } from "react";
-import { TouchableOpacity, View, Image, TextInput, StyleSheet, StyleProp, ViewStyle } from "react-native";
-import { Utils } from "tuya-panel-kit";
-
-const { add, subtract, inMaxMin } = Utils.NumberUtils
-
-const { convertX: cx } = Utils.RatioUtils
-
-export interface StepperProps {
-  value: number | string
-  stepValue?: number  // 1
-  min?: number  // 0
-  max?: number // 99
-  editable?: boolean
-  selectionColor?: string
-  isRealTime?: boolean
-  isBeyond?: boolean // 允许超出边界值
-  onValueChange?: ((value: number) => void)
-  disabled?: boolean
-  style?: StyleProp<ViewStyle>
-  buttonStyle?: StyleProp<ViewStyle>
-  inputStyle?: StyleProp<ViewStyle>
-}
-
-const Stepper = (props: StepperProps) => {
-  const state = useReactive({
-    value: localeNumber(Number(props.value), 1) ?? 0,
-    stepValue: props.stepValue ?? 1,
-    min: props.min ?? 0,
-    max: props.max ?? 99
-  })
-
-  const handlePress = useCallback((isAdd: boolean) => {
-    const v = inMaxMin(state.min, state.max, isAdd ? add(Number(exchangeNumber(state.value)), state.stepValue) : subtract(Number(exchangeNumber(state.value)), state.stepValue))
-    state.value = localeNumber(v, 1)
-    props.onValueChange && props.onValueChange(v)
-  }, [])
-
-
-  const handleChangeText = useCallback((v: string) => {
-    const newValue = exchangeNumber(v)
-    const idx = newValue.indexOf('.')
-    if (newValue[0] === '.' ||
-      (newValue.length === 2 && newValue[0] === '0' && newValue[1] !== '.') ||
-      newValue.split('').filter(item => item === '.').length > 1 ||
-      (!props.isBeyond && (Number(newValue) > state.max || Number(newValue) < state.min)) ||
-      (idx !== -1 && newValue.length > idx + 2)) {
-      return
-    }
-    if (props.isRealTime) {
-      if (typeof v === 'string' && !v.length) {
-        props.onValueChange && props.onValueChange(0)
-      } else {
-        props.onValueChange && props.onValueChange(Number(exchangeNumber(v)))
-      }
-    }
-    state.value = v
-  }, [])
-
-  const handleEndText = useCallback(() => {
-    if (typeof state.value === 'string' && !state.value.length) {
-      props.onValueChange && props.onValueChange(state.min)
-      state.value = state.min.toString()
-    } else {
-      props.onValueChange && props.onValueChange(Number(exchangeNumber(state.value)))
-    }
-
-  }, [])
-
-  return (
-    <View style={[styles.stepperContainer, props.style]}>
-      <TouchableOpacity
-        style={[styles.stepperButton, props.buttonStyle]}
-        onPress={() => handlePress(false)}
-      >
-        <Image width={cx(16)} height={cx(16)} source={res.ic_minus} />
-      </TouchableOpacity>
-      <TextInput
-        style={[styles.stepperInput, props.inputStyle]}
-        value={state.value.toString()}
-        keyboardType="numeric"
-        onChangeText={handleChangeText}
-        maxLength={4}
-        enablesReturnKeyAutomatically={true}
-        onEndEditing={handleEndText}
-        editable={props.editable || props.disabled}
-      />
-      <TouchableOpacity
-        style={[styles.stepperButton, props.buttonStyle]}
-        onPress={() => handlePress(true)}
-      >
-        <Image style={{ width: cx(20), height: cx(20) }} source={res.ic_plus} />
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  stepperContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-    padding: cx(2),
-    borderRadius: cx(12),
-    width: cx(150),
-  },
-  stepperButton: {
-    width: cx(52),
-    height: cx(28),
-    backgroundColor: '#fff',
-    borderRadius: cx(10),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  stepperInput: {
-    width: cx(42),
-    height: cx(22),
-    color: '#333',
-    fontSize: cx(16),
-    padding: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    textAlign: 'center',
-  }
-})
-
-export default memo(Stepper)
+import { exchangeNumber, localeNumber } from "@ledvance/base/src/utils/common";
+import res from "@res";
+import { useReactive } from "ahooks";
+import React, { memo, useCallback } from "react";
+import { TouchableOpacity, View, Image, TextInput, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import { Utils } from "tuya-panel-kit";
+
+const { add, subtract, inMaxMin } = Utils.NumberUtils
+
+const { convertX: cx } = Utils.RatioUtils
+
+export interface StepperProps {
+  value: number | string
+  stepValue?: number  // 1
+  min?: number  // 0
+  max?: number // 99
+  editable?: boolean
+  selectionColor?: string
+  isRealTime?: boolean
+  isBeyond?: boolean // 允许超出边界值
+  onValueChange?: ((value: number) => void)
+  disabled?: boolean
+  style?: StyleProp<ViewStyle>
+  buttonStyle?: StyleProp<ViewStyle>
+  inputStyle?: StyleProp<ViewStyle>
+}
+
+const Stepper = (props: StepperProps) => {
+  const state = useReactive({
+    value: localeNumber(Number(props.value), 1) ?? 0,
+    stepValue: props.stepValue ?? 1,
+    min: props.min ?? 0,
+    max: props.max ?? 99
+  })
+
+  const handlePress = useCallback((isAdd: boolean) => {
+    const v = inMaxMin(state.min, state.max, isAdd ? add(Number(exchangeNumber(state.value)), state.stepValue) : subtract(Number(exchangeNumber(state.value)), state.stepValue))
+    state.value = localeNumber(v, 1)
+    props.onValueChange && props.onValueChange(v)
+  }, [])
+
+
+  const handleChangeText = useCallback((v: string) => {
+    const newValue = exchangeNumber(v)
+    const idx = newValue.indexOf('.')
+    if (newValue[0] === '.' ||
+      (newValue.length === 2 && newValue[0] === '0' && newValue[1] !== '.') ||
+      newValue.split('').filter(item => item === '.').length > 1 ||
+      (!props.isBeyond && (Number(newValue) > state.max || Number(newValue) < state.min)) ||
+      (idx !== -1 && newValue.length > idx + 2)) {
+      return
+    }
+    if (props.isRealTime) {
+      if (typeof v === 'string' && !v.length) {
+        props.onValueChange && props.onValueChange(0)
+      } else {
+        props.onValueChange && props.onValueChange(Number(exchangeNumber(v)))
+      }
+    }
+    state.value = v
+  }, [])
+
+  const handleEndText = useCallback(() => {
+    if (typeof state.value === 'string' && !state.value.length) {
+      props.onValueChange && props.onValueChange(state.min)
+      state.value = state.min.toString()
+    } else {
+      props.onValueChange && props.onValueChange(Number(exchangeNumber(state.value)))
+    }
+
+  }, [])
+
+  return (
+    <View style={[styles.stepperContainer, props.style]}>
+      <TouchableOpacity
+        style={[styles.stepperButton, props.buttonStyle]}
+        onPress={() => handlePress(false)}
+      >
+        <Image width={cx(16)} height={cx(16)} source={res.ic_minus} />
+      </TouchableOpacity>
+      <TextInput
+        style={[styles.stepperInput, props.inputStyle]}
+        value={state.value.toString()}
+        keyboardType="numeric"
+        onChangeText={handleChangeText}
+        maxLength={4}
+        enablesReturnKeyAutomatically={true}
+        onEndEditing={handleEndText}
+        editable={props.editable || props.disabled}
+      />
+      <TouchableOpacity
+        style={[styles.stepperButton, props.buttonStyle]}
+        onPress={() => handlePress(true)}
+      >
+        <Image style={{ width: cx(20), height: cx(20) }} source={res.ic_plus} />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  stepperContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    padding: cx(2),
+    borderRadius: cx(12),
+    width: cx(150),
+  },
+  stepperButton: {
+    width: cx(52),
+    height: cx(28),
+    backgroundColor: '#fff',
+    borderRadius: cx(10),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stepperInput: {
+    width: cx(42),
+    height: cx(22),
+    color: '#333',
+    fontSize: cx(16),
+    padding: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+  }
+})
+
+export default memo(Stepper)

package/src/components/StripAdjustView.d.ts

@@ -1,16 +1,16 @@
-import { ColorAdjustViewProps } from "@ledvance/base/src/components/ColorAdjustView";
-import { ColorTempAdjustViewProps } from "@ledvance/base/src/components/ColorTempAdjustView";
-declare type TabsNode = {
-    key: number | string;
-    title: string;
-};
-interface StripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
-    lampTabs: TabsNode[];
-    activeKey: number | string;
-    onActiveKeyChange: (key: number | string) => void;
-    colorDiskActiveKey?: number | undefined;
-    onColorDiskChange?: (color: string[], idx: number) => void;
-}
-declare const StripAdjustView: (props: StripAdjustViewProps) => JSX.Element;
-export default StripAdjustView;
-export declare const ColorList: string[][];
+import { ColorAdjustViewProps } from "@ledvance/base/src/components/ColorAdjustView";
+import { ColorTempAdjustViewProps } from "@ledvance/base/src/components/ColorTempAdjustView";
+declare type TabsNode = {
+    key: number | string;
+    title: string;
+};
+interface StripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
+    lampTabs: TabsNode[];
+    activeKey: number | string;
+    onActiveKeyChange: (key: number | string) => void;
+    colorDiskActiveKey?: number | undefined;
+    onColorDiskChange?: (color: string[], idx: number) => void;
+}
+declare const StripAdjustView: (props: StripAdjustViewProps) => JSX.Element;
+export default StripAdjustView;
+export declare const ColorList: string[][];

package/src/components/StripAdjustView.tsx

@@ -1,130 +1,130 @@
-import React from "react";
-import { FlatList, TouchableOpacity, View, Image } from "react-native";
-import ColorAdjustView, { ColorAdjustViewProps } from "@ledvance/base/src/components/ColorAdjustView";
-import ColorTempAdjustView, { ColorTempAdjustViewProps } from "@ledvance/base/src/components/ColorTempAdjustView";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import { TabBar, Utils } from "tuya-panel-kit";
-import { ColorDisk } from "@tuya/tuya-panel-lamp-sdk";
-import res from "@ledvance/base/src/res";
-const { convertX: cx } = Utils.RatioUtils
-
-type TabsNode = {
-  key: number | string
-  title: string
-}
-interface StripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
-  lampTabs: TabsNode[]
-  activeKey: number | string
-  onActiveKeyChange: (key: number | string) => void
-  colorDiskActiveKey? : number | undefined
-  onColorDiskChange?: (color: string[], idx: number) => void
-}
-
-const StripAdjustView = (props: StripAdjustViewProps) => {
-  return (
-    <View>
-      <TabBar
-        type='radio'
-        tabs={props.lampTabs}
-        style={{ borderRadius: cx(8), backgroundColor: '#f6f6f6', height: cx(40), marginHorizontal: cx(16) }}
-        tabTextStyle={{ color: '#000' }}
-        tabActiveTextStyle={{ color: '#000', fontWeight: 'bold' }}
-        activeKey={props.activeKey}
-        onChange={props.onActiveKeyChange}
-      />
-      {
-        props.activeKey === 1 &&
-        <>
-          <Spacer height={cx(10)} />
-          <ColorAdjustView
-            h={props.h}
-            s={props.s}
-            v={props.v}
-            minSaturation={1}
-            reserveSV={true}
-            onHSVChange={props.onHSVChange}
-            onHSVChangeComplete={props.onHSVChangeComplete} />
-          <Spacer />
-        </>
-      }
-      {
-        props.activeKey === 0 &&
-        <>
-          <Spacer height={cx(10)} />
-          <ColorTempAdjustView
-            minBrightness={1}
-            isSupportTemperature={props.isSupportTemperature}
-            isSupportBrightness={props.isSupportBrightness}
-            colorTemp={props.colorTemp}
-            brightness={props.brightness}
-            onCCTChange={props.onCCTChange}
-            onCCTChangeComplete={props.onCCTChangeComplete}
-            onBrightnessChange={props.onBrightnessChange}
-            onBrightnessChangeComplete={props.onBrightnessChangeComplete} />
-          <Spacer />
-        </>
-      }
-      {
-        props.activeKey === 3 &&
-        <FlatList
-          numColumns={6}
-          style={{
-            marginHorizontal: cx(16),
-          }}
-          data={ColorList}
-          renderItem={({ item, index }) => {
-            return (
-              <TouchableOpacity
-                onPress={() => {
-                  props.onColorDiskChange && props.onColorDiskChange(item, index)
-                }}
-                style={{
-                  width: '16.66%', alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <ColorDisk
-                  radius={cx(20)}
-                  colors={item}
-                />
-                {props.colorDiskActiveKey === index && <View style={{ width: cx(44), height: cx(44), borderRadius: cx(44), borderColor: '#f60', borderWidth: cx(2), alignItems: 'center', justifyContent: 'center', position: 'absolute' }}>
-                  <Image source={{ uri: res.ic_check }} style={{ width: cx(40), height: cx(40), tintColor: '#fff' }} />
-                </View>}
-              </TouchableOpacity>
-            )
-          }}
-          ListHeaderComponent={() => <Spacer height={cx(10)} />}
-          ItemSeparatorComponent={() => <Spacer height={cx(10)} />}
-          ListFooterComponent={() => <Spacer height={cx(10)} />}
-          keyExtractor={(_, idx) => idx.toString()}
-        />
-      }
-    </View>
-  )
-}
-
-export default StripAdjustView
-
-export const ColorList = [
-  ['#F4A4BF', '#F65997','#F5075A','#F52071'],
-  ['#E393FE','#E294FE','#94E3FC','#A7C5FF'],
-  ['#2661FC', '#4D21B2','#F5085A','#FDFB42'],
-  ['#F66252','#F9B241', '#41C6FC','#E5EF66'],
-  ['#CBF0FF','#94E3FC','#41C6FC','#52D6FB'],
-  ['#76BC41','#95D35F','#F1F6B6','#B2DD8D'],
-  ['#76BC41','#D9EC39','#F66B05','#F9AB03'],
-  ['#F54019','#F66B05','#76BC41','#F9AA04'],
-  ['#4D21B2','#2661FC','#FDF76C','#BD39F4'],
-  ['#B18DFD','#8550FB','#4D21B2','#5E30E9'],
-  ['#F9AB03','#F9B241','#FCD9A7','#FAC678'],
-  ['#F9AC02','#41C6FC','#F54019','#5E30E9'],
-  ['#B2DD8D','#52D6FB','#8550FB','#41C6FC'],
-  ['#9A2ABD','#F65997','#F5085A','#F66B05','#FDFB42'],
-  ['#4D21B2','#5E30E9','#8550FB','#B18DFD','#D9C9FF'],
-  ['#F77370','#F65250','#F53B3C','#F52929','#F50204'],
-  ['#2660FC','#76A7FE','#FAC678','#F9AB03','#F66B05'],
-  ['#E294FE','#FDF76C','#95D35F','#52D6FB','#B18DFD'],
-  ['#3B88FD','#5E30E9','#F50821','#F66B05','#F9AB03'],
-  ['#76BC41','#95D35F','#B2DD8D','#D9EC39','#E8F291'],
-  ['#52D6FB','#F9B241','#F66B05','#D356FC','#9A2ABD'],
-  ['#F9AEC7','#F88ABA','#F65590','#F65C79','#F64A49', '#F50803'],
+import React from "react";
+import { FlatList, TouchableOpacity, View, Image } from "react-native";
+import ColorAdjustView, { ColorAdjustViewProps } from "@ledvance/base/src/components/ColorAdjustView";
+import ColorTempAdjustView, { ColorTempAdjustViewProps } from "@ledvance/base/src/components/ColorTempAdjustView";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import { TabBar, Utils } from "tuya-panel-kit";
+import { ColorDisk } from "@tuya/tuya-panel-lamp-sdk";
+import res from "@ledvance/base/src/res";
+const { convertX: cx } = Utils.RatioUtils
+
+type TabsNode = {
+  key: number | string
+  title: string
+}
+interface StripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
+  lampTabs: TabsNode[]
+  activeKey: number | string
+  onActiveKeyChange: (key: number | string) => void
+  colorDiskActiveKey? : number | undefined
+  onColorDiskChange?: (color: string[], idx: number) => void
+}
+
+const StripAdjustView = (props: StripAdjustViewProps) => {
+  return (
+    <View>
+      <TabBar
+        type='radio'
+        tabs={props.lampTabs}
+        style={{ borderRadius: cx(8), backgroundColor: '#f6f6f6', height: cx(40), marginHorizontal: cx(16) }}
+        tabTextStyle={{ color: '#000' }}
+        tabActiveTextStyle={{ color: '#000', fontWeight: 'bold' }}
+        activeKey={props.activeKey}
+        onChange={props.onActiveKeyChange}
+      />
+      {
+        props.activeKey === 1 &&
+        <>
+          <Spacer height={cx(10)} />
+          <ColorAdjustView
+            h={props.h}
+            s={props.s}
+            v={props.v}
+            minSaturation={1}
+            reserveSV={true}
+            onHSVChange={props.onHSVChange}
+            onHSVChangeComplete={props.onHSVChangeComplete} />
+          <Spacer />
+        </>
+      }
+      {
+        props.activeKey === 0 &&
+        <>
+          <Spacer height={cx(10)} />
+          <ColorTempAdjustView
+            minBrightness={1}
+            isSupportTemperature={props.isSupportTemperature}
+            isSupportBrightness={props.isSupportBrightness}
+            colorTemp={props.colorTemp}
+            brightness={props.brightness}
+            onCCTChange={props.onCCTChange}
+            onCCTChangeComplete={props.onCCTChangeComplete}
+            onBrightnessChange={props.onBrightnessChange}
+            onBrightnessChangeComplete={props.onBrightnessChangeComplete} />
+          <Spacer />
+        </>
+      }
+      {
+        props.activeKey === 3 &&
+        <FlatList
+          numColumns={6}
+          style={{
+            marginHorizontal: cx(16),
+          }}
+          data={ColorList}
+          renderItem={({ item, index }) => {
+            return (
+              <TouchableOpacity
+                onPress={() => {
+                  props.onColorDiskChange && props.onColorDiskChange(item, index)
+                }}
+                style={{
+                  width: '16.66%', alignItems: 'center',
+                  justifyContent: 'center',
+                }}>
+                <ColorDisk
+                  radius={cx(20)}
+                  colors={item}
+                />
+                {props.colorDiskActiveKey === index && <View style={{ width: cx(44), height: cx(44), borderRadius: cx(44), borderColor: '#f60', borderWidth: cx(2), alignItems: 'center', justifyContent: 'center', position: 'absolute' }}>
+                  <Image source={{ uri: res.ic_check }} style={{ width: cx(40), height: cx(40), tintColor: '#fff' }} />
+                </View>}
+              </TouchableOpacity>
+            )
+          }}
+          ListHeaderComponent={() => <Spacer height={cx(10)} />}
+          ItemSeparatorComponent={() => <Spacer height={cx(10)} />}
+          ListFooterComponent={() => <Spacer height={cx(10)} />}
+          keyExtractor={(_, idx) => idx.toString()}
+        />
+      }
+    </View>
+  )
+}
+
+export default StripAdjustView
+
+export const ColorList = [
+  ['#F4A4BF', '#F65997','#F5075A','#F52071'],
+  ['#E393FE','#E294FE','#94E3FC','#A7C5FF'],
+  ['#2661FC', '#4D21B2','#F5085A','#FDFB42'],
+  ['#F66252','#F9B241', '#41C6FC','#E5EF66'],
+  ['#CBF0FF','#94E3FC','#41C6FC','#52D6FB'],
+  ['#76BC41','#95D35F','#F1F6B6','#B2DD8D'],
+  ['#76BC41','#D9EC39','#F66B05','#F9AB03'],
+  ['#F54019','#F66B05','#76BC41','#F9AA04'],
+  ['#4D21B2','#2661FC','#FDF76C','#BD39F4'],
+  ['#B18DFD','#8550FB','#4D21B2','#5E30E9'],
+  ['#F9AB03','#F9B241','#FCD9A7','#FAC678'],
+  ['#F9AC02','#41C6FC','#F54019','#5E30E9'],
+  ['#B2DD8D','#52D6FB','#8550FB','#41C6FC'],
+  ['#9A2ABD','#F65997','#F5085A','#F66B05','#FDFB42'],
+  ['#4D21B2','#5E30E9','#8550FB','#B18DFD','#D9C9FF'],
+  ['#F77370','#F65250','#F53B3C','#F52929','#F50204'],
+  ['#2660FC','#76A7FE','#FAC678','#F9AB03','#F66B05'],
+  ['#E294FE','#FDF76C','#95D35F','#52D6FB','#B18DFD'],
+  ['#3B88FD','#5E30E9','#F50821','#F66B05','#F9AB03'],
+  ['#76BC41','#95D35F','#B2DD8D','#D9EC39','#E8F291'],
+  ['#52D6FB','#F9B241','#F66B05','#D356FC','#9A2ABD'],
+  ['#F9AEC7','#F88ABA','#F65590','#F65C79','#F64A49', '#F50803'],
 ]

package/src/components/StripLightView.d.ts

@@ -1,14 +1,14 @@
-import { ViewProps } from 'react-native';
-export interface LightNode {
-    color: string;
-    backgroundColor?: string;
-}
-export interface StripLightViewProps extends ViewProps {
-    nodes: LightNode[];
-    fixCount: number;
-    stripStyle: 'ONLY_LINE' | 'WITH_BEAD';
-    touchingMode?: 'CLICK' | 'TOUCH';
-    width: number;
-}
-declare const StripLightView: (props: StripLightViewProps) => JSX.Element;
-export default StripLightView;
+import { ViewProps } from 'react-native';
+export interface LightNode {
+    color: string;
+    backgroundColor?: string;
+}
+export interface StripLightViewProps extends ViewProps {
+    nodes: LightNode[];
+    fixCount: number;
+    stripStyle: 'ONLY_LINE' | 'WITH_BEAD';
+    touchingMode?: 'CLICK' | 'TOUCH';
+    width: number;
+}
+declare const StripLightView: (props: StripLightViewProps) => JSX.Element;
+export default StripLightView;

package/src/components/StripLightView.tsx

@@ -1,25 +1,25 @@
-import { requireNativeComponent, ViewProps } from 'react-native'
-import React from 'react'
-
-const NativeStripLightView = requireNativeComponent('StripLightView')
-
-export interface LightNode {
-  color: string
-  backgroundColor?: string
-}
-
-export interface StripLightViewProps extends ViewProps {
-  nodes: LightNode[]
-  fixCount: number
-  stripStyle: 'ONLY_LINE' | 'WITH_BEAD'
-  touchingMode?: 'CLICK' | 'TOUCH'
-  width: number
-}
-
-const StripLightView = (props: StripLightViewProps) => {
-  return (
-    <NativeStripLightView {...props} nodes={JSON.stringify(props.nodes)}/>
-  )
-}
-
+import { requireNativeComponent, ViewProps } from 'react-native'
+import React from 'react'
+
+const NativeStripLightView = requireNativeComponent('StripLightView')
+
+export interface LightNode {
+  color: string
+  backgroundColor?: string
+}
+
+export interface StripLightViewProps extends ViewProps {
+  nodes: LightNode[]
+  fixCount: number
+  stripStyle: 'ONLY_LINE' | 'WITH_BEAD'
+  touchingMode?: 'CLICK' | 'TOUCH'
+  width: number
+}
+
+const StripLightView = (props: StripLightViewProps) => {
+  return (
+    <NativeStripLightView {...props} nodes={JSON.stringify(props.nodes)}/>
+  )
+}
+
 export default StripLightView