Tuya Developer Forum

Code: Select all

import React, { useEffect, useState } from 'react';
import { View, Image, Text, ScrollView, router } from '@ray-js/ray';

import { LampColorCollection } from '@ray-js/components-ty-lamp';

const defaultColorList = [
  { h: 200, s: 1000, v: 1000 },
  { b: 1000, t: 670 },
];


export function Set() {

  const [colorList, setColorList] = useState(defaultColorList);
  const [activeIndex, setActiveIndex] = useState(0);
  const handleAdd = () => {
    setColorList([
      ...colorList,
      {
        b: Math.round(Math.random() * 1000),
        t: Math.round(Math.random() * 1000),
      },
    ]);
  };

  const handleDelete = (_colorList, _activeIndex) => {
    setColorList([..._colorList]);
    setActiveIndex(_activeIndex);
  };

  const handleChecked = (colorItem, _activeIndex: number) => {
    setActiveIndex(_activeIndex);
  };

  return (
    <View style={{ width: '100%', height: '100%' }}>
      <LampColorCollection
        disableDelete={colorList.length > 2}
        theme="dark"
        activeIndex={activeIndex}
        colorList={colorList}
        onAdd={handleAdd}
        onDelete={handleDelete}
        onChecked={handleChecked}
      />
    </View>
  )
}

export default Set;