0
点赞
收藏
分享

微信扫一扫

actionview react前端 BlockItem.jsx 源码解读：用于渲染甘特图中的一个任务块，根据传入的属性动态生成任务块，并根据不同的模式（进度或状态）显示不同的样式和信息

西红柿上校 2024-09-10 阅读 18
前端react.js甘特图unixd3Python后端开发


BlockItem.jsx源码

/root/workspace/actionview/av-github-source-code/actionview-fe/app/components/gantt/BlockItem.jsx

actionview react前端 BlockItem.jsx 源码解读：用于渲染甘特图中的一个任务块，根据传入的属性动态生成任务块，并根据不同的模式（进度或状态）显示不同的样式和信息_unix

import React, { PropTypes, Component } from 'react';
import { OverlayTrigger, Popover, Grid, Row, Col, ControlLabel } from 'react-bootstrap';
import _ from 'lodash';

const moment = require('moment');

export default class BlockItem extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    cellWidth: PropTypes.number.isRequired,
    blockHeight: PropTypes.number.isRequired,
    origin: PropTypes.number.isRequired,
    foldIssues: PropTypes.array.isRequired,
    issue: PropTypes.object.isRequired,
    options: PropTypes.object.isRequired,
    mode: PropTypes.string.isRequired
  }

  //shouldComponentUpdate(newProps, newState) {
  //  if (newProps.cellWidth != this.props.cellWidth
  //    || newProps.origin != this.props.origin
  //    || newProps.mode != this.props.mode
  //    || this.props.foldIssues.indexOf(this.props.issue.id) !== -1
  //    || newProps.foldIssues.indexOf(this.props.issue.id) !== -1
  //    || this.props.issue.id == newProps.selectedIssue.id 
  //    || this.props.issue.id == newProps.selectedIssue.parent_id) {
  //    return true;
  //  }
  //  return false;
  //}

  render() {
    const { 
      cellWidth,
      blockHeight,
      origin, 
      foldIssues, 
      issue,
      options:{ states=[] },
      mode
    } = this.props;

    const stateColors = { new : '#ccc', inprogress: '#3db9d3', completed: '#3c9445' };

    const popover=(
      <Popover id='popover-trigger-hover' style={ { maxWidth: '350px', padding: '15px 0px' } }>
        <Grid>
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>主题</Col>
            <Col sm={ 8 }><div style={ { textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' } }>{ issue.no + '-' + issue.title }</div></Col>
          </Row>
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>开始时间</Col>
            <Col sm={ 8 }>{ issue.expect_start_time ? moment.unix(issue.expect_start_time).format('YYYY/MM/DD') : <span style={ { fontStyle: 'italic', color: '#aaa' } }>未指定</span> }</Col>
          </Row>
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>结束时间</Col>
            <Col sm={ 8 }>{ issue.expect_complete_time ? moment.unix(issue.expect_complete_time).format('YYYY/MM/DD') : <span style={ { fontStyle: 'italic', color: '#aaa' } }>未指定</span> }</Col>
          </Row>
          { mode == 'progress' &&
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>进度</Col>
            <Col sm={ 8 }>{ issue.progress ? issue.progress + '%' : '0%' }</Col>
          </Row> }
          { mode == 'status' &&
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>状态</Col>
            <Col sm={ 8 }>{ _.findIndex(states, { id: issue.state }) != -1 ? <span className={ 'state-' + _.find(states, { id: issue.state }).category + '-label' }>{ _.find(states, { id: issue.state }).name }</span>: '-' }</Col>
          </Row> }
        </Grid>
      </Popover>);

    const start = moment.unix(issue.expect_start_time || issue.expect_complete_time || issue.created_at).startOf('day').format('X');
    const end = moment.unix(issue.expect_complete_time || issue.expect_start_time || issue.created_at).startOf('day').format('X');
    const size = (end - start) / 3600 / 24 + 1;
    const offset = (start - origin) / 3600 / 24;

    const width = size * cellWidth - 3;

    let backgroundColor = '#ccc';
    if (mode == 'progress') {
      if ((!issue.expect_start_time || !issue.expect_complete_time) && (!issue.progress || issue.progress < 100)) {
        backgroundColor = '#555';
      } else {
        backgroundColor = issue.hasSubtasks ? '#65c16f' : '#3db9d3';
      }
    } else if (mode == 'status') {
      const stateInd = _.findIndex(states, { id: issue.state });
      if (stateInd !== -1) {
        const category = states[stateInd].category;
        if ((!issue.expect_start_time || !issue.expect_complete_time) && category !== 'completed') {
          backgroundColor = '#555';
        } else {
          backgroundColor = stateColors[category];
        }
      }
    }

    const progressBGColor = issue.hasSubtasks ? '#3c9445' : '#2898b0';

    return (
      <div className='ganttview-block-container'>
        <OverlayTrigger trigger={ [ 'hover', 'focus' ] } rootClose placement='top' overlay={ popover }>
          { issue.hasSubtasks && foldIssues.indexOf(issue.id) === -1 ?
          <div className='ganttview-block-parent'
            id={ issue.id + '-block' }
            data-id={ issue.id }
            style={ { width: width + 'px', marginLeft: (offset * cellWidth + 1) + 'px' } }>
            <div className='ganttview-block-parent-left'/>
            <div className='ganttview-block-parent-right'/>
          </div>
          :
          <div
            className={ 'ganttview-block ' + (issue.hasSubtasks ? '' : 'ganttview-block-movable') }
            id={ issue.id + '-block' }
            data-id={ issue.id }
            style={ { width: width + 'px', height: blockHeight + 'px', marginLeft: (offset * cellWidth + 1) + 'px', backgroundColor } }>
            { mode == 'progress' &&
            <div
              className='ganttview-block-progress'
              style={ { height: blockHeight + 'px', width: (width * _.min([ _.max([ issue.progress || 0, 0 ]), 100 ]) / 100) + 'px', backgroundColor: progressBGColor } }/> }
          </div> }
        </OverlayTrigger>
      </div> ); 
  }
}

源码解读

这段代码定义了一个名为 BlockItem 的 React 组件，用于渲染甘特图中的一个任务块（或称为区块）。这个组件负责根据传入的属性动态生成任务块，并根据不同的模式（进度或状态）显示不同的样式和信息。

代码分析

导入模块

import React, { PropTypes, Component } from 'react';
import { OverlayTrigger, Popover, Grid, Row, Col, ControlLabel } from 'react-bootstrap';
import _ from 'lodash';

const moment = require('moment');

  • React：React 的核心库。
  • PropTypes：用于定义组件的 prop 类型检查。
  • react-bootstrap：提供了 Bootstrap 风格的 React 组件，这里使用了 OverlayTrigger, Popover, Grid, Row, Col, ControlLabel。
  • lodash：一个实用工具库，提供了很多常用的函数，如 _.findIndex 和 _.find。
  • moment：一个流行的 JavaScript 时间日期处理库。
定义组件类

export default class BlockItem extends Component {
  constructor(props) {
    super(props);
  }

  • BlockItem 类继承自 Component，表示这是一个 React 组件。
  • constructor 构造函数初始化组件，并调用父类构造函数 super(props) 来初始化父类属性。
定义 prop 类型

static propTypes = {
    cellWidth: PropTypes.number.isRequired,
    blockHeight: PropTypes.number.isRequired,
    origin: PropTypes.number.isRequired,
    foldIssues: PropTypes.array.isRequired,
    issue: PropTypes.object.isRequired,
    options: PropTypes.object.isRequired,
    mode: PropTypes.string.isRequired
  }

  • propTypes 是一个静态属性，用于定义组件接受的 prop 类型。
  • cellWidth：每个单元格的宽度。
  • blockHeight：任务块的高度。
  • origin：时间起点的 Unix 时间戳。
  • foldIssues：一个数组，包含需要折叠的任务 ID。
  • issue：一个对象，包含任务的信息。
  • options：一个对象，包含配置项。
  • mode：模式，可以是 'progress' 或 'status'。
shouldComponentUpdate 方法（注释掉）

//shouldComponentUpdate(newProps, newState) {
  //  if (newProps.cellWidth != this.props.cellWidth
  //    || newProps.origin != this.props.origin
  //    || newProps.mode != this.props.mode
  //    || this.props.foldIssues.indexOf(this.props.issue.id) !== -1
  //    || newProps.foldIssues.indexOf(this.props.issue.id) !== -1
  //    || this.props.issue.id == newProps.selectedIssue.id 
  //    || this.props.issue.id == newProps.selectedIssue.parent_id) {
  //    return true;
  //  }
  //  return false;
  //}

  • 这是一个生命周期方法，用于判断组件是否需要重新渲染。
  • 如果某些关键属性发生变化，则返回 true 表示需要更新。
  • 如果没有变化，则返回 false 表示不需要更新。
  • 注意：此方法已被注释掉，意味着默认情况下组件将遵循 React 的默认更新策略。
渲染方法

render() {
    const { 
      cellWidth,
      blockHeight,
      origin, 
      foldIssues, 
      issue,
      options:{ states=[] },
      mode
    } = this.props;

    const stateColors = { new : '#ccc', inprogress: '#3db9d3', completed: '#3c9445' };

    const popover=(
      <Popover id='popover-trigger-hover' style={ { maxWidth: '350px', padding: '15px 0px' } }>
        <Grid>
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>主题</Col>
            <Col sm={ 8 }><div style={ { textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' } }>{ issue.no + '-' + issue.title }</div></Col>
          </Row>
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>开始时间</Col>
            <Col sm={ 8 }>{ issue.expect_start_time ? moment.unix(issue.expect_start_time).format('YYYY/MM/DD') : <span style={ { fontStyle: 'italic', color: '#aaa' } }>未指定</span> }</Col>
          </Row>
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>结束时间</Col>
            <Col sm={ 8 }>{ issue.expect_complete_time ? moment.unix(issue.expect_complete_time).format('YYYY/MM/DD') : <span style={ { fontStyle: 'italic', color: '#aaa' } }>未指定</span> }</Col>
          </Row>
          { mode == 'progress' &&
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>进度</Col>
            <Col sm={ 8 }>{ issue.progress ? issue.progress + '%' : '0%' }</Col>
          </Row> }
          { mode == 'status' &&
          <Row>
            <Col sm={ 4 } componentClass={ ControlLabel } style={ { textAlign: 'right' } }>状态</Col>
            <Col sm={ 8 }>{ _.findIndex(states, { id: issue.state }) != -1 ? <span className={ 'state-' + _.find(states, { id: issue.state }).category + '-label' }>{ _.find(states, { id: issue.state }).name }</span>: '-' }</Col>
          </Row> }
        </Grid>
      </Popover>);

    const start = moment.unix(issue.expect_start_time || issue.expect_complete_time || issue.created_at).startOf('day').format('X');
    const end = moment.unix(issue.expect_complete_time || issue.expect_start_time || issue.created_at).startOf('day').format('X');
    const size = (end - start) / 3600 / 24 + 1;
    const offset = (start - origin) / 3600 / 24;

    const width = size * cellWidth - 3;

    let backgroundColor = '#ccc';
    if (mode == 'progress') {
      if ((!issue.expect_start_time || !issue.expect_complete_time) && (!issue.progress || issue.progress < 100)) {
        backgroundColor = '#555';
      } else {
        backgroundColor = issue.hasSubtasks ? '#65c16f' : '#3db9d3';
      }
    } else if (mode == 'status') {
      const stateInd = _.findIndex(states, { id: issue.state });
      if (stateInd !== -1) {
        const category = states[stateInd].category;
        if ((!issue.expect_start_time || !issue.expect_complete_time) && category !== 'completed') {
          backgroundColor = '#555';
        } else {
          backgroundColor = stateColors[category];
        }
      }
    }

    const progressBGColor = issue.hasSubtasks ? '#3c9445' : '#2898b0';

    return (
      <div className='ganttview-block-container'>
        <OverlayTrigger trigger={ [ 'hover', 'focus' ] } rootClose placement='top' overlay={ popover }>
          { issue.hasSubtasks && foldIssues.indexOf(issue.id) === -1 ?
          <div className='ganttview-block-parent'
            id={ issue.id + '-block' }
            data-id={ issue.id }
            style={ { width: width + 'px', marginLeft: (offset * cellWidth + 1) + 'px' } }>
            <div className='ganttview-block-parent-left'/>
            <div className='ganttview-block-parent-right'/>
          </div>
          :
          <div
            className={ 'ganttview-block ' + (issue.hasSubtasks ? '' : 'ganttview-block-movable') }
            id={ issue.id + '-block' }
            data-id={ issue.id }
            style={ { width: width + 'px', height: blockHeight + 'px', marginLeft: (offset * cellWidth + 1) + 'px', backgroundColor } }>
            { mode == 'progress' &&
            <div
              className='ganttview-block-progress'
              style={ { height: blockHeight + 'px', width: (width * _.min([ _.max([ issue.progress || 0, 0 ]), 100 ]) / 100) + 'px', backgroundColor: progressBGColor } }/> }
          </div> }
        </OverlayTrigger>
      </div> ); 
  }
}

  • render 方法返回组件的 JSX 结构。
  • 解构赋值 const { ... } = this.props 来提取传入的 props。
  • 定义状态颜色 stateColors。
  • 创建一个 Popover 用于显示任务的详细信息。
  • 使用 moment 计算任务的开始时间和结束时间，并转换为 Unix 时间戳。
  • 计算任务块的大小 size 和偏移量 offset。
  • 计算任务块的宽度 width。
  • 根据模式 mode 设置背景颜色 backgroundColor。
  • 根据模式 mode 设置进度背景颜色 progressBGColor。
  • 渲染任务块：
  • 如果任务有子任务并且不在折叠列表中，则渲染一个带有左右箭头的父任务块。
  • 否则，渲染一个普通任务块，并根据模式显示进度条。
  • 使用 OverlayTrigger 使得当鼠标悬停或聚焦时显示 Popover。

总结

这个 BlockItem 组件负责渲染甘特图中的一个任务块，并根据不同的模式（进度或状态）显示不同的样式和信息。组件还提供了一个 Popover 弹出框，用于展示任务的详细信息。通过这种方式，组件能够灵活地适应不同的数据和布局需求，为用户提供清晰的任务进度或状态视图，并且提供了交互性，增强了用户体验。


举报

相关推荐

actionview react前端Grids.jsx源码解读：这个组件负责根据传入的属性动态生成网格行，并根据折叠状态决定哪些行需要渲染详细信息，哪些行仅渲染空白占位符。

前端react.js前端框架ide占位符Python后端开发

actionview react前端GridItem.jsx源码解读：这个组件负责绘制甘特图中的一个行级网格，每个单元格代表一天时间

前端react.js甘特图构造函数当前日期Python后端开发

一个接口根据不同的情况返回不同的数据类型，有时返回excel文件，需要前端下载，有时返回json，前端如何处理

javascriptjson数据读取文件编程语言

ViSTa：一个包含4000多个视频和逐步描述的层次化数据集，用于评估VLMs在不同复杂性任务中的表现。

数据集强化学习语言模型机器学习数据集AI大模型应用机器学习人工智能yyds干货盘点

2.77-假设我们有一个任务:生成一段代码，将整数变量x乘以不同的常数因子K。

c语言

[答疑]系统根据当前是销售员还是组长显示的数据略有不同，是应该分两个用例还是一个用例

用例数据类图Linux系统/运维

[答疑精选]系统根据当前是销售员还是组长显示的数据略有不同，是应该分两个用例还是一个用例

用例数据虚拟化云计算

Python 数据处理与分析（三） 设计一个高回报的投资组合（投资回报和风险分析）任务 2：计算不同类型的收益率和投资组合的收益率

pythonpandasnumpy算法算法分析

计算每个部门中销售额最高的前N个产品，或者进一步分析这些产品的销售趋势。但在这里，我将给出一个稍微不同的例子，即计算每个部门中销售额占比超过特定阈值（比如10%）的产品列表，并显示它们的销售额和占比。

SQL数据Python后端开发

动态规划练习——给定一个整型数组arr，代表数值不同的纸牌排成一条线，玩家A和玩家B依次拿走每张纸牌，规定玩家A先拿，玩家B后拿，但是每个玩家每次只能拿走最左或最右的纸牌，玩家A和玩家B都绝顶聪明。请

动态规划算法
0 条评论