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;