qt-public-ui/es/Retention/index.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["extraCols", "dataSource", "data", "timeUnit", "type", "onCellClick", "className", "isGroup"];
/* eslint-disable no-param-reassign */
import React, { useState, useEffect } from 'react';
import { Table } from '..';
import classnames from 'classnames';
import { formatValue } from '../utils';
import './style.less';
var unitDisplayText = {
  day: '天',
  week: '周',
  month: '月'
};
var getColorClassName = function getColorClassName(value) {
  if (isNaN(value)) {
    return 'td-color-empty';
  }
  var cls;
  if (value > 80) {
    cls = 'td-color-1';
  } else if (value > 60) {
    cls = 'td-color-2';
  } else if (value > 40) {
    cls = 'td-color-3';
  } else if (value > 20) {
    cls = 'td-color-4';
  } else if (value >= 0) {
    cls = 'td-color-5';
  }
  return cls;
};
var VALUES = {
  day: [1, 2, 3, 4, 5, 6, 7, 14, 30],
  week: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  month: [1, 2, 3, 4, 5, 6, 7, 8, 9]
};
var Retention = function Retention(props) {
  var _props$extraCols = props.extraCols,
    extraCols = _props$extraCols === void 0 ? [] : _props$extraCols,
    dataSource = props.dataSource,
    data = props.data,
    _props$timeUnit = props.timeUnit,
    timeUnit = _props$timeUnit === void 0 ? 'day' : _props$timeUnit,
    _props$type = props.type,
    type = _props$type === void 0 ? 'value' : _props$type,
    onCellClick = props.onCellClick,
    className = props.className,
    _props$isGroup = props.isGroup,
    isGroup = _props$isGroup === void 0 ? false : _props$isGroup,
    tableProps = _objectWithoutPropertiesLoose(props, _excluded);
  var _useState = useState([]),
    columns = _useState[0],
    setColumns = _useState[1];
  var renderRate = function renderRate(index, value, record) {
    var rate = record["rate_" + index];
    return /*#__PURE__*/React.createElement("div", {
      className: "numbe " + (isGroup && type === 'value' && value > 0 ? 'group' : '') + " " + getColorClassName(rate)
    }, formatValue(type === 'rate' ? 'decimal_percent' : 'number', '')(value));
  };
  useEffect(function () {
    setColumns([].concat(extraCols, VALUES[timeUnit].map(function (v) {
      return {
        title: "" + v + unitDisplayText[timeUnit] + "\u540E",
        dataIndex: type + "_" + v,
        align: 'right',
        render: renderRate.bind(null, v)
      };
    })).map(function (col) {
      col.onCell = function (record, index) {
        return {
          onClick: function onClick(e) {
            onCellClick && onCellClick(record, col, index, e);
          }
        };
      };
      return col;
    }));
  }, [extraCols, onCellClick, timeUnit, type]);
  return /*#__PURE__*/React.createElement(Table, _extends({
    className: classnames('umui-retention-table', className),
    collapsed: true,
    dataSource: dataSource || data || [],
    columns: columns
  }, tableProps));
};
Retention.displayName = 'Retention';
export default Retention;