iep-ui/es/iep-business-card/BusinessCard.js

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

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import IepButton from './IepButton';

export default {
  name: 'IepBusinessCard',
  props: {
    title: PropTypes.string,
    dateTime: PropTypes.string,
    prefixText: PropTypes.string.def('月'),
    prefixColor: PropTypes.string.def('#ff8031'),
    active: PropTypes.bool.def(false)
  },
  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      checked: false,
      more: false,
      localActive: false
    };
  },

  watch: {
    active: {
      handler: function handler(e) {
        this.localActive = e;
      },

      immediate: true,
      deep: true
    }
  },
  methods: {
    handleBoxTap: function handleBoxTap() {
      this.localActive = !this.localActive;
      this.checked = this.localActive;
      this.more = this.localActive;
      this.$emit('boxTap', this.localActive);
    },
    handleMore: function handleMore() {
      this.more = !this.more;
      this.$emit('more', this.more);
    },
    handleOther: function handleOther(e) {
      this.more = false;
      this.checked = false;
      this.localActive = false;
      this.$emit('btn', e);
    }
  },
  render: function render() {
    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $slots = this.$slots,
        $props = this.$props,
        checked = this.checked,
        more = this.more,
        localActive = this.localActive,
        handleBoxTap = this.handleBoxTap,
        handleMore = this.handleMore,
        handleOther = this.handleOther;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('business-card', customizePrefixCls);
    var title = $props.title,
        dateTime = $props.dateTime,
        prefixText = $props.prefixText,
        prefixColor = $props.prefixColor;


    return h(
      'div',
      _mergeJSXProps([{
        'class': [prefixCls, localActive ? prefixCls + '-active' : '']
      }, {
        on: {
          click: handleBoxTap
        }
      }]),
      [h(
        'div',
        { 'class': prefixCls + '-header' },
        [h(
          'div',
          {
            'class': prefixCls + '-header-left',
            style: {
              '--color': prefixColor
            }
          },
          [$slots.prefix ? $slots.prefix : h('span', [prefixText])]
        ), h(
          'div',
          { 'class': [prefixCls + '-header-right', more ? prefixCls + '-header-right-show' : ''] },
          [h(
            'div',
            { 'class': prefixCls + '-header-right-tools' },
            [h(
              'div',
              { 'class': prefixCls + '-header-right-tools-item' },
              [h(IepButton, _mergeJSXProps([{
                attrs: {
                  type: 'basic_linear_directive_export3'
                }
              }, {
                on: {
                  click: function click() {
                    return handleOther('export');
                  }
                }
              }]))]
            ), h(
              'div',
              { 'class': prefixCls + '-header-right-tools-item' },
              [h(IepButton, _mergeJSXProps([{
                attrs: {
                  type: 'basic_linear_edit_delete'
                }
              }, {
                on: {
                  click: function click() {
                    return handleOther('delete');
                  }
                }
              }]))]
            )]
          ), h(
            'div',
            { 'class': prefixCls + '-header-right-more' },
            [h(IepButton, {
              attrs: { type: 'basic_linear_common_more' },
              on: {
                'click': function click(e) {
                  return handleMore(e);
                }
              }
            })]
          )]
        )]
      ), h(
        'div',
        { 'class': prefixCls + '-body' },
        [h('span', [title])]
      ), h(
        'div',
        { 'class': prefixCls + '-footer' },
        [h('span', [dateTime])]
      ), h(
        'div',
        { 'class': prefixCls + '-checked' },
        [h('a-checkbox', {
          attrs: { checked: checked }
        })]
      )]
    );
  }
};