Skip to content

React时间轴组件,横向时间,无限拖动

License

Notifications You must be signed in to change notification settings

jyoketsu/timeline

Repository files navigation

Timeline-React(React 时间轴)


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


Installation

yarn add @jyoketsu/timeline-react

or

npm i @jyoketsu/timeline-react

Screenshot

fMg2wD.png

Use case

fB2aq0.png

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>;

About

React时间轴组件,横向时间,无限拖动

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published