@ray-js/lamp-circle-picker v1.0.6

English | 简体中文

@ray/lamp-circle-picker

LampCirclePicker

Installation

$ npm install @ray-js/components-ty-lamp
# or
$ yarn add @ray-js/components-ty-lamp

Usage

interface IProps {
  /**
   * @description.zh 默认数值
   * @description.en default value
   * @default
   */
  value: number;
  /**
   * @description.zh 内部色环宽度
   * @description.en The width of inner color ring
   * @default 80
   */
  innerRingRadius?: number;
  /**
   * @description.zh 色盘宽度
   * @description.en The width of color ring
   * @default 140
   */
  radius?: number;
  /**
   * @description.zh 是否展示色圈
   * @description.en Whether to show color circle
   * @default true
   */
  isShowThumb?: boolean;
  /**
   * @description.zh 是否当前颜色文案
   * @description.en Whether the current color text
   * @default false
   */
  isShowColorTip?: boolean;
  /**
   * @description.zh 手指按下时的回调函数
   * @description.en Finger press when the callback function
   * @default ''
   */
  onTouchStart?: (value: number) => void;
  /**
   * @description.zh 手指按下拖动时的回调函数
   * @description.en Finger to press the drag of the callback function
   * @default ''
   */
  onTouchMove?: (value: number) => void;
  /**
   * @description.zh 手指按下结束时的回调函数
   * @description.en Finger press at the end of the callback function
   * @default ''
   */
  onTouchEnd?: (value: number) => void;
}

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

export default () => {
  const [temperature, setTemperature] = useState(20);
  const handleMove = (v: number) => {
    setTemperature(v);
  };
  const handleEnd = (v: number) => {
    setTemperature(v);
  };
  return (
    <LampCirclePicker temperature={temperature} onTouchMove={handleMove} onTouchEnd={handleEnd} />
  );
};