Extension SDK for PanelsLight SDKLighting Component LibraryBiorhythm Color Picker

Biorhythm Color Picker

Last Updated on : 2021-12-30 06:00:38download

RhythmsCircle

Preview

Properties

Field name	Data type	Description	Default value
size	Number	The style of the picker.	280
ringWidth	Number	The size of the outer circle for the thumb.	40
thumbSize	Number	The size of the inner circle for the thumb.	36
pickerStyle	Style	The style of the outermost layer for the picker.	None
timeStyle	Style	The style of the time picker.	{backgroundColor: ‘transparent’ }
thumbStyle	Style	The style of the thumb icon.	{backgroundColor: ‘#222430’ }
iconStyle	Style	The style of the icon.	None
timeImg	Image	The image of the time pointer.	None
data	Array	The data.	[]
disabled	Boolean	Specifies whether the thumb icon can be dragged.	false
disabledOpacity	Boolean	The opacity of the thumb in the disabled state.	1
stepOverEnabled	Boolean	Specifies whether to slide through the previous and next nodes.	false
stepTime	Number	The angle of the 15-minimum time step.	45
lastRingColor	String	Adds one color following the sunset node to optimize the color picker.	‘#000’
onMove	Func	The event in which the thumb icon starts moving.	None
onRelease	Func	The event in which the thumb icon stops moving.	None
onChange	Func	The event in which the thumb icon is changed.	None

Example

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RhythmsCircle } from '@tuya/tuya-panel-lamp-sdk';
import { Utils } from 'tuya-panel-kit';
import Icon from '../../../res/rhythmIcons';

const defaultData = [
  {
    color: '#CE8040',
    noActiveColor: '#fff',
    activeColor: '#F7EB2A',
    icon: Icon.icon1,
    index: 0,
    time: 390,
    valid: true,
  },
  {
    color: '#CEECFE',
    noActiveColor: '#fff',
    activeColor: '#FFB420',
    icon: Icon.icon2,
    index: 1,
    time: 690,
    valid: true,
  },
];
const RhythmsCircleScene: React.FC = () => {
  const [data, setData] = useState(defaultData);

  return (
    <View>
        <RhythmsCircle
          size={200}
          ringWidth={30}
          thumbSize={26}
          onRelease={d => setData(d)}
          disabled={false}
          disabledOpacity={1}
          stepOverEnabled={false}
          data={data}
        />
    </View>
  );
};
export default RhythmsCircleScene;

Prev DocCommon Timers

Next DocTime Text Format