iep-ui/lib/iep-timeline/TimelineItem.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _configConsumerProps = require('../config-provider/configConsumerProps');

var _propsUtil = require('../_util/props-util');

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

exports['default'] = {
  name: 'IepTimelineItem',
  props: {
    left: _vueTypes2['default'].any,
    dateTime: _vueTypes2['default'].string,
    time: _vueTypes2['default'].string,
    icon: _vueTypes2['default'].string,
    title: _vueTypes2['default'].string,
    right: _vueTypes2['default'].any
  },
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  render: function render() {
    var h = arguments[0];

    var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
        customizePrefixCls = _getOptionProps.prefixCls,
        dateTime = _getOptionProps.dateTime,
        time = _getOptionProps.time,
        title = _getOptionProps.title;

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-timeline-item', customizePrefixCls);
    var children = (0, _propsUtil.filterEmpty)(this.$slots['default']);
    var icon = (0, _propsUtil.getComponentFromProp)(this, 'icon');
    var bottom = prefixCls + '-bottom-20';
    if (dateTime && time) {
      bottom = prefixCls + '-bottom-30';
    }
    if (dateTime && time && this.$slots.left) {
      bottom = prefixCls + '-bottom-56';
    } else {
      bottom = prefixCls + '-bottom-40';
    }

    return h(
      'div',
      { 'class': [prefixCls, bottom] },
      [h('div', {
        'class': [prefixCls + '-tail', this.$slots.left || dateTime || time ? '' : prefixCls + '-tail-pl']
      }), this.$slots.left || dateTime || time ? h(
        'div',
        { 'class': prefixCls + '-left' },
        [this.$slots.left, h(
          'span',
          { 'class': prefixCls + '-left-date-time' },
          [dateTime]
        ), time ? h(
          'span',
          { 'class': prefixCls + '-left-time' },
          [h('a-iep-icon', {
            attrs: { type: 'alarm_clock_line' }
          }), h('span', [time])]
        ) : null]
      ) : null, h(
        'div',
        {
          'class': [prefixCls + '-dot', this.$slots.left || dateTime || time ? '' : prefixCls + '-dot-pl']
        },
        [icon]
      ), h(
        'div',
        {
          'class': [prefixCls + '-wrapper', this.$slots.left || dateTime || time ? '' : prefixCls + '-wrapper-pl']
        },
        [title ? h(
          'div',
          { 'class': prefixCls + '-wrapper-title' },
          [title]
        ) : null, h(
          'div',
          { 'class': prefixCls + '-wrapper-info' },
          [children]
        )]
      )]
    );
  }
};