Biorhythm Color Picker

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

RhythmsCircle

Preview

Biorhythm Color Picker

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;