@ray-js/lamp-color-collection v1.0.1

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}
    />
  );
};