Timeline-React（React 时间轴）

████████╗██╗███╗   ███╗███████╗██╗     ██╗███╗   ██╗███████╗
╚══██╔══╝██║████╗ ████║██╔════╝██║     ██║████╗  ██║██╔════╝
   ██║   ██║██╔████╔██║█████╗  ██║     ██║██╔██╗ ██║█████╗
   ██║   ██║██║╚██╔╝██║██╔══╝  ██║     ██║██║╚██╗██║██╔══╝
   ██║   ██║██║ ╚═╝ ██║███████╗███████╗██║██║ ╚████║███████╗
   ╚═╝   ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝╚═╝╚═╝  ╚═══╝╚══════╝

live demo

Installation

yarn add @jyoketsu/timeline-react

or

npm i @jyoketsu/timeline-react

Screenshot

Use case

Usage

import TimeLevel from '@jyoketsu/timeline-react/dist/interface/TimeLevel';

<div className={classes.timeViewer}>
  <Timeline handleDateChanged={handleDateChanged}>
    {/* children component */}
    <TimeNodes nodeGroups={nodeGroups} columnCount={columnCount} />
  </Timeline>
</div>;

Hold down the right button and drag

Props

Props	Description	Type	isRequire	Default
timeLevels	时间等级列表	TimeLevel[]	否	见下
initTimeLevel	初始化时间等级	TimeLevel	否	timeLevels[0]
initTime	初始化时间	number (Millis Timestamp)	否	new Date().getTime()
backgroundColor	背景色	string	否	#2C3C4E
shiftX	横向偏移，用于调整 hover 时竖线的位置	number	否	0
nodeList	时间轴中的子节点列表	NodeItem[]	是	-
nodeHeight	子节点元素高度	number	是	-
handleDateChanged	数据变化事件	DateChangedFunc	否	-
handleClickAdd	点击添加按钮	ClickAddFunc	否	-
wheelable	是否可以滚动缩放	boolean	否	true
changeLevelRequestData	切换 timeLevel 时是否重新获取数据，如果是，清空当前数据并在新的数据获得前不要重新渲染	boolean	否	false
ref	ref		否	-

TimeLevel

interface TimeLevel {
  name: string;
  dateUnit: 'year' | 'month' | 'day' | 'hour';
  amount: number;
  // 能被keyDate个dateUnit整除，则为keyDate
  keyDate: number;
}

NodeItem

export default interface NodeItem {
  _key: string;
  time: number;
  itemRender: Function;
}

DateChangedFunc

interface DateChangedFunc {
  (
    startDate: number,
    endDate: number,
    amount: number,
    currentTimeLevel: TimeLevel
  ): void;
}

ClickAddFunc

interface ClickAddFunc {
  (time: number, clientX: number, clientY: number): void;
}

defaultTimeLevels

const defaultTimeLevels: TimeLevel[] = [
  { name: 'hour', dateUnit: 'hour', amount: 1, keyDate: 12 },
  { name: 'day', dateUnit: 'day', amount: 1, keyDate: 5 },
  { name: 'week', dateUnit: 'day', amount: 7, keyDate: 5 },
  { name: 'month', dateUnit: 'month', amount: 1, keyDate: 5 },
  { name: 'year', dateUnit: 'year', amount: 1, keyDate: 5 },
  {
    name: 'ten-year',
    dateUnit: 'year',
    amount: 10,
    keyDate: 5,
  },
];

Functions

Function name	Description	Props
handleChangeLevel	更改 timeLevel（缩放）	zoomIn: boolean
handleClickMoveButton	左右移动	next: boolean

Function usage

const timelineRef = useRef < any > null;

timelineRef.current.handleClickMoveButton(true);

<Timeline
  ref={timelineRef}
  nodeList={items}
  nodeHeight={28}
  backgroundColor="unset"
  shiftX={-56}
  handleDateChanged={handleDateChanged}
  handleClickAdd={handleOpenOptions}
  changeLevelRequestData={true}
></Timeline>;