English | 简体中文
@ray-js/lamp-color-collection
照明色彩收藏组件
预览
Installation
$ npm install @ray-js/components-ty-lamp
// or
$ yarn add @ray-js/components-ty-lamp
Usage
// Attribute
export interface IColor {
h?: number; // hue 取值范围: 0 - 360
s?: number; // saturation 取值范围: 0 - 1000
v?: number; // value 取值范围: 0 - 1000
b?: number; // brightness 取值范围: 0 - 1000
t?: number; // temperature 取值范围: 0 - 1000
}
export type ThemeStyle = {
background: string;
addBgColor: string;
};
export interface IProps {
/**
* @description.zh 是否允许删除
* @description.en Whether or not allowed to delete
* @default true
*/
disableDelete?: boolean;
/**
* @description.zh 主题色,支持自定义
* @description.en Theme color, support custom
* @default dark
*/
theme?: 'dark' | 'light' | ThemeStyle;
/**
* @description.zh 整体样式
* @description.en The overall style
* @default {}
*/
containerStyle?: React.CSSProperties;
/**
* @description.zh 内容样式
* @description.en Content style
* @default {}
*/
contentStyle?: React.CSSProperties;
/**
* @description.zh 颜色值元素样式
* @description.en Color value style element
* @default {}
*/
colorItemStyle?: React.CSSProperties;
/**
* @description.zh 色值列表
* @description.en Color value list
* @default []
*/
colorList: IColor[];
/**
* @description.zh 当前选中颜色索引
* @description.en The color of the currently selected index
* @default -1
*/
activeIndex: number;
/**
* @description.zh 限制的颜色个数
* @description.en The number of colors in the limit
* @default 6
*/
limit?: number;
/**
* @description.zh 增加色值的回调函数
* @description.en Increase the color value of the callback function
* @default () => {}
*/
onAdd?: () => void;
/**
* @description.zh 删除色值的回调函数
* @description.en Delete the color value of the callback function
* @default () => {}
*/
onDelete?: (colorList: IColor[], activeIndex: number) => void; //
/**
* @description.zh 选中色值的回调函数
* @description.en Select the color value of the callback function
* @default () => {}
*/
onChecked?: (colorItem: IColor, activeIndex: number) => void;
}
const nilFn = () => null;
export const defaultProps: IProps = {
theme: 'light',
containerStyle: {},
contentStyle: {},
limit: 6,
onAdd: nilFn,
onDelete: nilFn,
onChecked: nilFn,
colorList: [],
activeIndex: -1,
};
import { LampColorCollection } from '@ray-js/components-ty-lamp';
export default () => {
const defaultColorList = [
{ h: 200, s: 1000, v: 1000 },
{ h: 400, s: 1000, v: 1000 },
{ h: 700, s: 1000, v: 1000 },
];
const [colorList, setColorList] = useState(defaultColorList);
const [activeIndex, setActiveIndex] = useState(0);
const handleAdd = () => {
setColorList([
...colorList,
{
// 传入新增的颜色值
h: Math.round(Math.random() * 1000),
s: 1000,
v: 1000,
},
]);
};
const handleDelete = (_colorList, _activeIndex) => {
setColorList([..._colorList]);
setActiveIndex(_activeIndex);
};
const handleChecked = (colorItem: IColor, index: number) => {
setActiveIndex(index);
};
return (
<LampColorCollection
theme="dark"
activeIndex={activeIndex}
colorList={colorList}
onAdd={handleAdd}
onDelete={handleDelete}
onChecked={handleChecked}
/>
);
};