English | 简体中文

@ray-js/lamp-rect-picker-color

lamp-rect-picker-color

install

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

Usage

• Props And Methods

type HS = { h: number, s: number };
type Props = {
  hs: HS, // Rectangular plate color values [reference linking](https://baike.baidu.com/item/HSV/547122?fr=aladdin)
  thumbRadius?: number, // The width of the rectangle color plate of thumb
  rectWidth?: number, // The width of the rectangle color wheel
  rectHeight?: number, // The height of the rectangular color wheel
  colorTipStyle?: string, // The prompt style
  borderRadius?: number, // Fillet value， The priority is lower than border radius style
  borderRadiusStyle?: string, // eg: 12px 12px 0 0; Same as border radius style Settings in the browser
  isShowTip?: boolean, // Whether to show color copy
  closed?: boolean, // Off state
  useEventChannel?: boolean // Whether to enable the event channel
  eventChannelName?: string; // Event channel name
  onTouchStart?: (hs: HS) => void, // Rectangular color wheel touch the start of the callback function
  onTouchMove?: (hs: HS) => void, // Rectangular color wheel touch mobile callback function ⚠ ️ note: move trigger high frequency can add throttling to improve performance
  onTouchEnd?: (hs: HS) => void, // Rectangular color wheel touch the end of the callback function
};

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

const Main = () => {
  const [temp, setTemp] = useState(100);
  const [closed, setClosed] = useState(false);
  const handleTouchStart = e => {
    console.log(e, 'handleTouchStart');
  };
  const handleTouchMove = e => {
    console.log(e, 'handleTouchMove');
  };
  const handleTouchEnd = e => {
    console.log(e, 'handleTouchEnd');
  };
  return (
    <LampRectWhitePicker
      temp={temp}
      borderRadius={16} // 设置圆角 优先级低于 borderRadiusStyle
      // borderRadiusStyle="62rpx 62rpx 0 0"
      rectWidth={340}
      rectHeight={200}
      thumbRadius={16}
      isShowTip
      closed={closed}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    />
  );
};

// Turns on the use event channel property, which can be used in other rjs components
Render({
  // other xxx
  renderChannel() {
    const eventChannelName = 'lampCirclePickerWhiteEventChannel';
    this.instance.eventChannel.on(eventChannelName, e => {
      // Here you can receive the color data that is passed when the color changes
      const {
        data, // temp
        touchType, // : 'start' | 'move' | 'end'
        pos,
      } = e;
      console.log('eventChannel get', e);
    });
  },
});