ant-design-vue/components/card/Card.vue

<script>
  import { Tabs } from 'antd'
  import PropTypes from '../_util/vue-types'
  import addEventListener from '../_util/Dom/addEventListener'
  import { getComponentFromProp, getComponentName } from '../_util/props-util'
  import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'
  import BaseMixin from '../_util/BaseMixin'

  const { TabPane } = Tabs
  export default {
    name: 'Card',
    mixins: [BaseMixin],
    props: {
      prefixCls: PropTypes.string.def('ant-card'),
      title: PropTypes.string,
      extra: PropTypes.any,
      bordered: PropTypes.bool.def(true),
      bodyStyle: PropTypes.object,
      loading: PropTypes.bool.def(false),
      hoverable: PropTypes.bool.def(false),
      type: PropTypes.string,
      actions: PropTypes.any,
      tabList: PropTypes.array,
    },
    data () {
      this.updateWiderPaddingCalled = false
      return {
        widerPadding: false,
      }
    },
    beforeMount () {
      this.updateWiderPadding = throttleByAnimationFrame(this.updateWiderPadding)
    },
    mounted () {
      this.updateWiderPadding()
      this.resizeEvent = addEventListener(window, 'resize', this.updateWiderPadding)
    },
    beforeDestroy () {
      if (this.resizeEvent) {
        this.resizeEvent.remove()
      }
      this.updateWiderPadding.cancel && this.updateWiderPadding.cancel()
    },
    methods: {
      updateWiderPadding () {
        const cardContainerRef = this.$refs.cardContainerRef
        if (!cardContainerRef) {
          return
        }
        // 936 is a magic card width pixer number indicated by designer
        const WIDTH_BOUDARY_PX = 936
        if (cardContainerRef.offsetWidth >= WIDTH_BOUDARY_PX && !this.widerPadding) {
          this.setState({ widerPadding: true }, () => {
            this.updateWiderPaddingCalled = true // first render without css transition
          })
        }
        if (cardContainerRef.offsetWidth < WIDTH_BOUDARY_PX && this.widerPadding) {
          this.setState({ widerPadding: false }, () => {
            this.updateWiderPaddingCalled = true // first render without css transition
          })
        }
      },
      onHandleTabChange (key) {
        this.$emit('tabChange', key)
      },
      isContainGrid (obj = []) {
        let containGrid
        obj.forEach((element) => {
          if (
            element &&
            element.componentOptions &&
            getComponentName(element.componentOptions) === 'Grid'
          ) {
            containGrid = true
          }
        })
        return containGrid
      },
    },
    render () {
      const {
        prefixCls = 'ant-card', extra, bodyStyle, title, loading,
        bordered = true, type, tabList, hoverable,
      } = this.$props

      const { $slots } = this

      const classString = {
        [`${prefixCls}`]: true,
        [`${prefixCls}-loading`]: loading,
        [`${prefixCls}-bordered`]: bordered,
        [`${prefixCls}-hoverable`]: !!hoverable,
        [`${prefixCls}-wider-padding`]: this.widerPadding,
        [`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
        [`${prefixCls}-contain-grid`]: this.isContainGrid($slots.default),
        [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
        [`${prefixCls}-type-${type}`]: !!type,
      }

      const loadingBlock = (
        <div class={`${prefixCls}-loading-content`}>
          <p class={`${prefixCls}-loading-block`} style={{ width: '94%' }} />
          <p>
            <span class={`${prefixCls}-loading-block`} style={{ width: '28%' }} />
            <span class={`${prefixCls}-loading-block`} style={{ width: '62%' }} />
          </p>
          <p>
            <span class={`${prefixCls}-loading-block`} style={{ width: '22%' }} />
            <span class={`${prefixCls}-loading-block`} style={{ width: '66%' }} />
          </p>
          <p>
            <span class={`${prefixCls}-loading-block`} style={{ width: '56%' }} />
            <span class={`${prefixCls}-loading-block`} style={{ width: '39%' }} />
          </p>
          <p>
            <span class={`${prefixCls}-loading-block`} style={{ width: '21%' }} />
            <span class={`${prefixCls}-loading-block`} style={{ width: '15%' }} />
            <span class={`${prefixCls}-loading-block`} style={{ width: '40%' }} />
          </p>
        </div>
      )

      let head
      const tabs = tabList && tabList.length ? (
        <Tabs class={`${prefixCls}-head-tabs`} size='large' onChange={this.onHandleTabChange}>
          {tabList.map(item => <TabPane tab={item.tab} key={item.key} />)}
        </Tabs>
      ) : null
      const titleDom = title || getComponentFromProp(this, 'title')
      const extraDom = extra || getComponentFromProp(this, 'extra')
      if (titleDom || extraDom || tabs) {
        head = (
          <div class={`${prefixCls}-head`}>
            <div class={`${prefixCls}-head-wrapper`}>
              {titleDom && <div class={`${prefixCls}-head-title`}>{titleDom}</div>}
              {extraDom && <div class={`${prefixCls}-extra`}>{extraDom}</div>}
            </div>
            {tabs}
          </div>
        )
      }

      const children = $slots.default
      const cover = getComponentFromProp(this, 'cover')
      const coverDom = cover ? <div class={`${prefixCls}-cover`}>{cover}</div> : null
      const body = (
        <div class={`${prefixCls}-body`} style={bodyStyle}>
          {loading ? loadingBlock : children}
        </div>
      )
      const actions = getComponentFromProp(this, 'actions')
      const actionDom = actions || null

      return (
        <div class={classString} ref='cardContainerRef'>
          {head}
          {coverDom}
          {children ? body : null}
          {actionDom}
        </div>
      )
    },
  }
</script>