diff --git a/README.md b/README.md index 2339277..14387fb 100644 --- a/README.md +++ b/README.md @@ -6,22 +6,24 @@

React Gantt Component

-## 官网 +English | [简体中文](./README.zh-CN.md) -[https://ahwgs.github.io/react-gantt/#/](https://ahwgs.github.io/react-gantt/#/) +## WebSite -## 快速使用 +[https://ahwgs.github.io/react-gantt/#/en-US](https://ahwgs.github.io/react-gantt/#/en-US) + +## Quick Start ```bash -# 安装依赖 +# Install Dependencies $ yarn add rc-gantt -# 使用组件 +# Use import RcGantt, { GanttProps } from 'rc-gantt' const data = new Array(100).fill({ - name: '一个名称一个名称一个名称一个名称', + name: 'Title', startDate: '2021-07-10', endDate: '2021-07-12', collapsed: false, @@ -29,7 +31,7 @@ const data = new Array(100).fill({ { startDate: '2021-07-10', endDate: '2021-07-12', - name: '一个名称', + name: 'TitleTitle', collapsed: false, content: '123123123', }, @@ -41,10 +43,11 @@ const App = () => {
+ + Logo + +

rc-gantt

+

React Gantt Component

+
+ +[English](./README.md) | 简体中文 + +## 官网 + +[https://ahwgs.github.io/react-gantt/#/](https://ahwgs.github.io/react-gantt/#/) + +## 快速使用 + +```bash +# 安装依赖 +$ yarn add rc-gantt + +# 使用组件 + +import RcGantt, { GanttProps } from 'rc-gantt' + +const data = new Array(100).fill({ + name: '一个名称一个名称一个名称一个名称', + startDate: '2021-07-10', + endDate: '2021-07-12', + collapsed: false, + children: [ + { + startDate: '2021-07-10', + endDate: '2021-07-12', + name: '一个名称', + collapsed: false, + content: '123123123', + }, + ], +}) + +const App = () => { + return ( +
+ { + return true + }} + /> +
+ ) +} + +ReactDOM.render(, document.getElementById('root')) +``` + +## 问题反馈 + +请访问 [Github](https://github.com/ahwgs/react-gantt/issues) 或加微信,备注 `rc-gantt` + + diff --git a/package.json b/package.json index 1eb6c02..59ab096 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-gantt", - "version": "0.1.10", + "version": "0.2.0", "homepage": "https://ahwgs.github.io/react-gantt/#/", "repository": { "type": "git", diff --git a/website/component.en-US.md b/website/component.en-US.md index 94d30c5..1d8a3f7 100644 --- a/website/component.en-US.md +++ b/website/component.en-US.md @@ -22,45 +22,45 @@ click to create task`bar` -### 多级结构 +### Multi-level structure -确保每个节点中包含 `children` 属性,即可实现多级结构 +Ensure that each node contains the `children` attribute to achieve a multi-level structure -可以通过 `onExpand` 获取当前展开的状态 +You can get the current expanded status with `onExpand` -### 自定义表格列 +### Customizing table columns -`columns` 类型定义见类型定义 +`columns` type definition see Type Definition -其中,如果每列都配置 `width` 属性。组件内部会计算总宽度。默认初始化表格宽度为总宽度 +where if each column is configured with the `width` property. The total width is calculated internally by the component. The default initialized table width is the total width -### 依赖结构 +### Dependency Structure -### 自定义渲染 +### Custom Rendering -### 自定义筛选 +### Customized filtering -默认当前日期筛选支持 日、周、月、季、年。支持传入配置,自定义筛选维度 +Default current date filtering support Day, Week, Month, Quarter, Year. Support incoming configuration to customize the filtering dimension -### 高级用法 +### Advanced Usage -主要介绍 `alwaysShowTaskBar` `unit` 以及 `innerRef` 上内置方法的使用 +Introducing the use of the built-in methods on `alwaysShowTaskBar`, `unit` and `innerRef`. -## 类型定义 +## Type Definition -### `Column` 定义 +### `Column` Definition ```typescript export type ColumnAlign = 'center' | 'right' | 'left' @@ -77,9 +77,9 @@ export interface Column { } ``` -### `data` 定义 +### `data` Definition -其中内置了如下几个字段,如果数据中包含如下属性会做特殊处理 +The following fields are built in, and special treatment will be done if the data contains the following attributes ```typescript export type Record = RecordType & { @@ -92,7 +92,7 @@ export type Record = RecordType & { } ``` -### `Dependence` 定义 +### `Dependence` Definition ```typescript export type DependenceType = 'start_finish' | 'finish_start' | 'start_start' | 'finish_finish' @@ -103,9 +103,9 @@ export interface Dependence { } ``` -### `Bar` 定义 +### `Bar` Definition -在我们需要使用一些自定义函数时,会给我们返回如下类型数据,其中 `record` 为源数据 + When we need to use some custom functions, we will be returned the following type of data, where `record` is the source data ```typescript export interface Bar { @@ -130,7 +130,7 @@ export interface Bar { } ``` -### `Sight` 定义 +### `Sight` Definition ```typescript export type Sight = 'day' | 'week' | 'month' | 'quarter' | 'halfYear' @@ -166,11 +166,11 @@ export type Sight = 'day' | 'week' | 'month' | 'quarter' | 'halfYear' | renderRightText | 自定义渲染右侧内容区 | `(barInfo: Gantt.Bar) => React.ReactNode` | | onExpand | 点击展开图标时触发 | `(record: Gantt.Record,collapsed:boolean) => void` | -## 方法 +## Methods -对外抛出 `innerRef` +has `innerRef` | 参数 | 说明 | 类型 | 默认值 | | -------------- | -------- | ---------- | ------ | -| backToday | 返回今日 | `Function` | -| getWidthByDate | 返回事件 | `Function` | +| backToday | backToday | `Function` | +| getWidthByDate | getWidthByDate | `Function` | diff --git a/website/index.en-US.md b/website/index.en-US.md index 144da79..784815c 100644 --- a/website/index.en-US.md +++ b/website/index.en-US.md @@ -27,6 +27,7 @@ import RcGantt from 'rc-gantt' return (