@ray-js/lamp-rhythm-circle v0.0.9

English | 简体中文

@ray/lamp-rhythm-circle

照明生物节律色环

Installation

$ npm install @ray-js/lamp-rhythm-circle
# or
$ yarn add @ray-js/lamp-rhythm-circle

Usage

import RhythmCircle from '@ray-js/lamp-rhythm-circle';

export default function Home() {
  // 每一个时间节点, 8>节点个数>2
  const [rhythmNode, setRhythmNode] = useState([
    {
      activeColor: '#CE8040', //节点对应的渐变颜色
      icon: res.icon1_colour, //节点对应展示的icon
      time: 390, //节点对应的时间数据 单位为分钟
      valid: true, //节点是否可以拖动
    },
    {
      activeColor: '#CEECFE',
      icon: res.icon2_colour,
      time: 690,
      valid: true,
    },
    {
      activeColor: '#B3ABA8',
      icon: res.icon3_colour,
      time: 1020,
      valid: true,
    },
    {
      activeColor: '#1E272C',
      icon: res.icon4_colour,
      time: 1260,
      valid: true,
    },
  ]);

  const handleChange = v => {
    // 当滑动时，会返回当前的所有节点数据，以及当前拖动的节点index
    const { value, activeIndex } = v;
    setRhythmNode(value);
  };

  const handleRelease = v => {};
  return (
    <View className={styles.view}>
      <DemoBlock title="基础用法">
        <Text className={styles.demoBlockTitleText}>生物节律</Text>
        <RhythmsCircle
          // 外圈半径
          innerRadius={107.5}
          // 内圈背景
          radius={147.5}
          // 节点最小时间间隔
          offset={30}
          // 节点数据
          data={rhythmNode}
          // move时触发的事件
          onChange={handleChange}
          // end释放时触发的事件
          onRelease={handleRelease}
        />
      </DemoBlock>
    </View>
  );
}