@ray-js/lamp-color-collection
v1.2.1
Published
照明色彩收藏组件
Downloads
237
Readme
@ray-js/lamp-color-collection
Lighting color collection
Installation
$ npm install @ray-js/components-ty-lamp
// or
$ yarn add @ray-js/components-ty-lamp
Usage
Basic Usage
import { LampColorCollection } from '@ray-js/components-ty-lamp';
const defaultColorList = [
{ h: 200, s: 1000, v: 1000 },
{ b: 1000, t: 670 },
];
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);
};
<LampColorCollection
disableDelete={colorList.length > 2}
theme="dark"
activeIndex={activeIndex}
colorList={colorList}
onAdd={handleAdd}
onDelete={handleDelete}
onChecked={handleChecked}
/>;
Advanced Usage:click to delete is supported,Note⚠️: Newly added in V1.2.0 version
import { LampColorCollection } from '@ray-js/components-ty-lamp';
const { ColorCollectInnerDelete } = LampColorCollection;
const defaultColorList = [
{ h: 200, s: 1000, v: 1000 },
{ b: 1000, t: 670 },
];
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);
};
<ColorCollectInnerDelete
disableDelete={colorList.length > 2}
theme="light"
activeIndex={activeIndex}
colorList={colorList}
onAdd={handleAdd}
onDelete={handleDelete}
onChecked={handleChecked}
/>;
Advanced Usage:Custom delete button style,Note⚠️: Newly added in V1.2.0 version
import { LampColorCollection } from '@ray-js/components-ty-lamp';
const { ColorCollectInnerDelete } = LampColorCollection;
const defaultColorList = [
{ h: 200, s: 1000, v: 1000 },
{ b: 1000, t: 670 },
];
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);
};
<ColorCollectInnerDelete
disableDelete={colorList.length > 2}
theme="dark"
activeIndex={activeIndex}
colorList={colorList}
onAdd={handleAdd}
onDelete={handleDelete}
onChecked={handleChecked}
renderDeleteElement={() => (
<View
style={{
position: 'absolute',
top: '50%',
right: '50%',
transform: 'translateY(-50%) translateX(50%)',
width: 40,
height: 4,
borderRadius: 10,
backgroundColor: 'red',
zIndex: 10,
}}
/>
)}
/>;