@ray-js/lamp-hue-picker v1.0.5

English | 简体中文

@ray/lamp-hue-picker

LampHuePicker

Preview

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 the current color text
   * @default false
   */
  isShowColorTip?: boolean;
  /**
   * @description.zh 手指按下时的回调函数
   * @description.en Finger press when the callback function
   * @default
   */
  onTouchStart?: (hue: number) => void;
  /**
   * @description.zh 手指按下拖动时的回调函数
   * @description.en Finger to press the drag of the callback function
   * @default
   */
  onTouchMove?: (hue: number) => void;
  /**
   * @description.zh 手指按下结束时的回调函数
   * @description.en Finger press at the end of the callback function
   * @default
   */
  onTouchEnd?: (hue: number) => void;
}

// 用法
import { LampHuePicker } from '@ray-js/components-ty-lamp';

export default () => {
  const [hue, setHue] = useState(20);
  const handleMove = (v: number) => {
    setHue(v);
  };
  const handleEnd = (v: number) => {
    setHue(v);
  };

  useEffect(() => {
    // Simulation of dp report
    setTimeout(() => {
      setHue(300);
    }, 3000);
  }, []);

  const handleMove = (v: number) => {
    // Pay attention to performance issues, may need to add the throttling function
    setHue(v);
  };
  return <LampHuePicker value={hue} onTouchMove={handleMove} onTouchEnd={handleEnd} />;
};