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

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useState } from 'react';
import classnames from 'classnames';
import { formatValue, notEmpty } from '../utils';
import variable from '../../theme/g2.var';
import { useCycleList, useUpdateEffect } from 'qt-public-hooks';
import { Tips, IconSlim as Icon, HorizontalScroll } from '..';
import './style';
var colorCls = variable.colors.map(function (c) {
  return "color-" + c.slice(1);
});
var getValue = function getValue(record, render) {
  return typeof render === 'function' ? render(record) : formatValue('number')(record.value);
};
var getDefaultSelect = function getDefaultSelect(type) {
  return type === 'multi' ? [] : '';
};
var RankCards = function RankCards(props) {
  var onChange = props.onChange,
    _props$size = props.size,
    size = _props$size === void 0 ? 'default' : _props$size,
    _props$type = props.type,
    type = _props$type === void 0 ? 'default' : _props$type,
    _props$max = props.max,
    max = _props$max === void 0 ? Infinity : _props$max,
    _props$min = props.min,
    min = _props$min === void 0 ? 0 : _props$min,
    _props$list = props.list,
    list = _props$list === void 0 ? [] : _props$list,
    colorless = props.colorless,
    _props$style = props.style,
    style = _props$style === void 0 ? {} : _props$style;
  var isControlled = ('value' in props);
  var _useCycleList = useCycleList(colorCls),
    colors = _useCycleList.getIndexOf;
  var _useState = useState(props.value || props.defaultValue || getDefaultSelect(type)),
    selected = _useState[0],
    setSelect = _useState[1];
  var maxValue = Math.max.apply(Math, list.map(function (s) {
    return s.value;
  }));
  var getWidth = function getWidth(value) {
    return Math.round(value / maxValue * 100) + "%";
  };
  var onCardClick = function onCardClick(id) {
    if (type === 'multi') {
      var _selected = [].concat(selected);
      var index = _selected.indexOf(id);
      if (index > -1) {
        // 如果存在就删除
        // 判断是否超过限制
        if (_selected.length > min) {
          _selected.splice(index, 1);
          setSelect(_selected);
        }
      } else if (_selected.length < max) {
        // 不存在就添加
        _selected.length < max && _selected.push(id);
        setSelect(_selected);
      }
    }
    if (type === 'single') {
      selected !== id && setSelect(id);
    }

    // click 事件
    props.onClick && props.onClick(id);
  };
  var getColorCls = function getColorCls(id, index) {
    if (type === 'multi') {
      return selected.indexOf(id) > -1 ? colors(index) : 'color-unselect';
    }
    if (type === 'single') {
      return selected === id ? colors(index) : 'color-unselect';
    }
    return colors(index);
  };
  useUpdateEffect(function () {
    onChange && onChange(selected);
  }, [selected]);
  useUpdateEffect(function () {
    isControlled && setSelect(props.value || getDefaultSelect(type));
  }, [props.value]);
  return /*#__PURE__*/React.createElement("div", {
    className: "umui-rank"
  }, /*#__PURE__*/React.createElement(HorizontalScroll, {
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    className: "umui-rank-cards"
  }, props.list && props.list.map(function (it, i) {
    var _classnames;
    var ratio = parseFloat("" + it.ratio);
    var percent = !isNaN(ratio) ? formatValue('percent')(ratio) : getWidth(it.value);
    return /*#__PURE__*/React.createElement("div", {
      key: it.id || i,
      className: classnames('umui-card-item', (_classnames = {
        'umui-small-item': size === 'small'
      }, _classnames[getColorCls(it.id, i)] = !colorless, _classnames)),
      onClick: it.disabled ? function () {} : onCardClick.bind(null, it.id)
    }, /*#__PURE__*/React.createElement("div", {
      className: "umui-card-item-bar"
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        width: percent
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "umui-card-item-rank"
    }, it.star ? /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-star",
      className: "umui-card-item-star"
    }) : i + 1), /*#__PURE__*/React.createElement("div", {
      className: "umui-card-item-label"
    }, /*#__PURE__*/React.createElement("span", {
      className: classnames({
        'umui-with-tips': !!it.tips
      })
    }, it.label), it.tips && /*#__PURE__*/React.createElement(Tips, _extends({}, it.tips, {
      className: "umui-label-tips"
    }))), /*#__PURE__*/React.createElement("div", {
      className: "umui-card-item-value"
    }, getValue(it, props.renderItem)));
  }))), notEmpty(props.indicators) && /*#__PURE__*/React.createElement("div", {
    className: "umui-rank-indicators"
  }, props.indicators && props.indicators.map(function (it, i) {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: it.label || i
    }, /*#__PURE__*/React.createElement("span", {
      className: "umui-rank-indicators-label"
    }, it.label), /*#__PURE__*/React.createElement("span", {
      className: "umui-rank-indicators-value"
    }, formatValue('number')(it.value)));
  })));
};
RankCards.displayName = 'RankCards';
RankCards.defaultProps = {
  type: 'default',
  size: 'default',
  max: Infinity,
  min: 0
};
export default RankCards;