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

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _utils = require("../utils");
var _g = _interopRequireDefault(require("../../theme/g2.var"));
var _qtPublicHooks = require("qt-public-hooks");
var _ = require("..");
require("./style");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var colorCls = _g["default"].colors.map(function (c) {
  return "color-".concat(c.slice(1));
});
var getValue = function getValue(record, render) {
  return typeof render === 'function' ? render(record) : (0, _utils.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 = (0, _qtPublicHooks.useCycleList)(colorCls),
    colors = _useCycleList.getIndexOf;
  var _useState = (0, _react.useState)(props.value || props.defaultValue || getDefaultSelect(type)),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    selected = _useState2[0],
    setSelect = _useState2[1];
  var maxValue = Math.max.apply(Math, list.map(function (s) {
    return s.value;
  }));
  var getWidth = function getWidth(value) {
    return "".concat(Math.round(value / maxValue * 100), "%");
  };
  var onCardClick = function onCardClick(id) {
    if (type === 'multi') {
      var _selected = (0, _toConsumableArray2["default"])(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);
  };
  (0, _qtPublicHooks.useUpdateEffect)(function () {
    onChange && onChange(selected);
  }, [selected]);
  (0, _qtPublicHooks.useUpdateEffect)(function () {
    isControlled && setSelect(props.value || getDefaultSelect(type));
  }, [props.value]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-rank"
  }, /*#__PURE__*/_react["default"].createElement(_.HorizontalScroll, {
    style: style
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-rank-cards"
  }, props.list && props.list.map(function (it, i) {
    var ratio = parseFloat("".concat(it.ratio));
    var percent = !isNaN(ratio) ? (0, _utils.formatValue)('percent')(ratio) : getWidth(it.value);
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: it.id || i,
      className: (0, _classnames2["default"])('umui-card-item', (0, _defineProperty2["default"])({
        'umui-small-item': size === 'small'
      }, getColorCls(it.id, i), !colorless)),
      onClick: it.disabled ? function () {} : onCardClick.bind(null, it.id)
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-card-item-bar"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        width: percent
      }
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-card-item-rank"
    }, it.star ? /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
      type: "umicon-star",
      className: "umui-card-item-star"
    }) : i + 1), /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-card-item-label"
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: (0, _classnames2["default"])({
        'umui-with-tips': !!it.tips
      })
    }, it.label), it.tips && /*#__PURE__*/_react["default"].createElement(_.Tips, (0, _extends2["default"])({}, it.tips, {
      className: "umui-label-tips"
    }))), /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-card-item-value"
    }, getValue(it, props.renderItem)));
  }))), (0, _utils.notEmpty)(props.indicators) && /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-rank-indicators"
  }, props.indicators && props.indicators.map(function (it, i) {
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
      key: it.label || i
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "umui-rank-indicators-label"
    }, it.label), /*#__PURE__*/_react["default"].createElement("span", {
      className: "umui-rank-indicators-value"
    }, (0, _utils.formatValue)('number')(it.value)));
  })));
};
RankCards.displayName = 'RankCards';
RankCards.defaultProps = {
  type: 'default',
  size: 'default',
  max: Infinity,
  min: 0
};
var _default = exports["default"] = RankCards;