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

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

import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import { filterEmpty, getComponentFromProp, getOptionProps } from '../_util/props-util';
import PropTypes from '../_util/vue-types';

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

    var _getOptionProps = 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 = filterEmpty(this.$slots['default']);
    var icon = 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]
        )]
      )]
    );
  }
};