iep-ui/es/iep-business-block/business-block-rank.js

An enterprise-class UI design language and Vue-based implementation

import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import LineIcon from './icons/lineIcon';
import CircleIcon from './icons/circleIcon';
import { isEmpty } from 'lodash';
import Empty from '../empty';

export default {
  name: 'IepBusinessBlockRank',
  props: _extends({
    data: PropTypes.array
  }, Empty.props),
  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  render: function render() {
    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $props = this.$props;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-business-block-rank', customizePrefixCls);
    var data = $props.data,
        image = $props.image,
        description = $props.description;

    var itemVNodes = !isEmpty(data) ? data.map(function (item) {
      return h(
        'div',
        { 'class': prefixCls + '-item' },
        [h(
          'div',
          { 'class': prefixCls + '-item-cell' },
          [h(
            'span',
            { 'class': 'label' },
            [item.title]
          ), h(
            'span',
            { 'class': 'number' },
            [item.number]
          ), h(
            'span',
            { 'class': 'unit' },
            [item.unit]
          )]
        ), h(
          'div',
          { 'class': prefixCls + '-item-cell' },
          [h(
            'span',
            { 'class': 'label' },
            [item.rankTitle]
          ), h(
            'span',
            { 'class': 'number' },
            [item.rank]
          )]
        )]
      );
    }) : null;
    var emptyProps = {
      props: {
        image: image,
        description: description
      }
    };

    return h(
      'div',
      { 'class': [prefixCls, !isEmpty(data) ? '' : prefixCls + '-empty'] },
      [!isEmpty(data) ? [itemVNodes, h(
        'div',
        { 'class': prefixCls + '-mark' },
        [h(
          'div',
          { 'class': prefixCls + '-mark-inner' },
          [h('div', { 'class': prefixCls + '-mark-circle' }), h('div', { 'class': prefixCls + '-mark-row' }), h('div', { 'class': prefixCls + '-mark-column' }), h('div', { 'class': prefixCls + '-mark-core' }), h(
            'div',
            { 'class': prefixCls + '-mark-line' },
            [h(LineIcon)]
          ), h(
            'div',
            { 'class': prefixCls + '-mark-chart' },
            [h(CircleIcon)]
          )]
        )]
      )] : h(Empty, emptyProps)]
    );
  }
};