vue-ant-patterns/biz-lib/b-vm/components/SectionCard.js

vue-ant-patterns

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _extend = require('extend');

var _extend2 = _interopRequireDefault(_extend);

var _antDesignVue = require('ant-design-vue');

var _components = require('../../../lib');

var _defaultProps = require('../defaultProps');

var _defaultProps2 = _interopRequireDefault(_defaultProps);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _en_US = require('../locale/en_US');

var _en_US2 = _interopRequireDefault(_en_US);

var _zh_CN = require('../locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

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

var langType = {
  'zh-cn': _zh_CN2['default'],
  'en-us': _en_US2['default']
};

var sectionSingleEdit = _defaultProps2['default'].sectionSingleEdit,
    sectionOptions = _defaultProps2['default'].sectionOptions;
exports['default'] = {
  name: 'vm-section-card',
  props: {
    sectionSingleEdit: sectionSingleEdit,
    sectionOptions: sectionOptions,
    title: _vueTypes2['default'].string,
    extraTitle: _vueTypes2['default'].any,
    locale: _vueTypes2['default'].string.def('zh-cn'),
    cardStatus: _vueTypes2['default'].oneOf(['edit', 'view']).def('view')
  },
  model: {
    prop: 'status',
    event: 'cardStatus.change'
  },
  created: function created() {},
  data: function data() {
    var _$props = this.$props,
        sectionOptions = _$props.sectionOptions,
        cardStatus = _$props.cardStatus;

    var localEditCfg = (0, _extend2['default'])(_defaultProps.sectionOptions, sectionOptions);
    var isEdit = cardStatus === _defaultProps.cardStatusToStr[1];
    var mouseIn = isEdit;
    return {
      localEditCfg: localEditCfg,
      v_status: cardStatus,
      isEdit: isEdit,
      langType: langType,
      mouseIn: mouseIn,
      saveButtonDisabled: false
    };
  },

  watch: {
    cardStatus: function cardStatus(val) {
      this.v_status = val;
    },
    sectionOptions: function sectionOptions(v) {
      this.localEditCfg = (0, _extend2['default'])(_defaultProps.sectionOptions, v);
    },
    v_status: function v_status(val) {
      this.isEdit = val === 'edit';
      this.$emit('cardStatus.cardStatus', val);
    }
  },
  mounted: function mounted() {},

  methods: {
    getProps: function getProps() {
      var _this = this;

      var h = this.$createElement;
      var _$props2 = this.$props,
          sectionSingleEdit = _$props2.sectionSingleEdit,
          title = _$props2.title,
          locale = _$props2.locale,
          extraTitle = _$props2.extraTitle,
          $listeners = _$props2.$listeners,
          $attrs = _$props2.$attrs;
      var localEditCfg = this.localEditCfg,
          isEdit = this.isEdit,
          langType = this.langType,
          mouseIn = this.mouseIn,
          saveButtonDisabled = this.saveButtonDisabled;
      var _langType$locale = langType[locale],
          langCancel = _langType$locale.cancel,
          langSave = _langType$locale.save,
          langEdit = _langType$locale.edit;

      var cls = (0, _classnames2['default'])({
        // 'mouse-in': mouseIn,
        'mouse-in': true
      });
      var cardProps = {
        props: {
          bordered: false,
          title: title
        },
        'class': cls,
        on: (0, _extends3['default'])({}, $listeners),
        attrs: (0, _extends3['default'])({}, $attrs),
        ref: 'cardRef'
      };
      if (sectionSingleEdit) {
        var _ref = localEditCfg || {},
            _ref$size = _ref.size,
            size = _ref$size === undefined ? 'small' : _ref$size,
            _ref$save = _ref.save,
            saveIcon = _ref$save === undefined ? 'save' : _ref$save,
            _ref$edit = _ref.edit,
            editIcon = _ref$edit === undefined ? 'edit' : _ref$edit,
            _ref$cancel = _ref.cancel,
            cancelIcon = _ref$cancel === undefined ? 'rollback' : _ref$cancel;

        cardProps.scopedSlots = {
          extra: function extra() {
            var editProps = {
              props: {
                size: 'small',
                icon: editIcon
              },
              on: {
                click: function click() {
                  _this.v_status = _defaultProps.cardStatusToStr[1];
                }
              }
            };
            var cancelProps = {
              props: {
                size: size,
                icon: cancelIcon
              },
              on: {
                click: function click() {
                  if (saveButtonDisabled) {
                    _this.saveButtonDisabled = false;
                    _this.$emit('cancelLoading');
                    return;
                  }
                  _this.v_status = _defaultProps.cardStatusToStr[0];
                }
              }
            };
            var saveProps = {
              props: {
                size: size
              },
              on: {
                click: function click() {
                  if (saveButtonDisabled) return;
                  _this.saveButtonDisabled = true;
                  _this.$emit('cardSave', function (V) {
                    _this.saveButtonDisabled = false;
                  });
                }
              }
            };
            var cardHeadExtraActionCls = _defaultProps.cardHeadCls[1];
            return h(
              _components.DContainer,
              {
                attrs: { flex: true, justify: 'center' },
                'class': cardHeadExtraActionCls },
              [extraTitle, h(
                'transition',
                {
                  attrs: { name: 'no-mode-translate-fade', mode: 'out-in' }
                },
                [!isEdit ? h(
                  _antDesignVue.Tooltip,
                  {
                    attrs: { title: langEdit }
                  },
                  [h(_components.DIconButton, editProps)]
                ) : null, isEdit ? h(
                  _components.DContainer,
                  {
                    attrs: { flex: true, justify: 'center' }
                  },
                  [h(
                    _antDesignVue.Tooltip,
                    {
                      attrs: { title: langCancel }
                    },
                    [h(_components.DIconButton, cancelProps)]
                  ), h(
                    _antDesignVue.Tooltip,
                    {
                      attrs: { title: langSave }
                    },
                    [h(
                      _components.DIconButton,
                      saveProps,
                      [!saveButtonDisabled ? h(_antDesignVue.Icon, {
                        attrs: { type: saveIcon }
                      }) : h(_antDesignVue.Icon, {
                        attrs: { type: 'loading' }
                      })]
                    )]
                  )]
                ) : null]
              )]
            );
          }
        };
      } else if (extraTitle) {
        cardProps.scopedSlots = {
          extra: function extra() {
            return extraTitle;
          }
        };
      }
      if (extraTitle || sectionSingleEdit) {
        cardProps.on = (0, _extends3['default'])({}, cardProps.on, {
          mouseenter: function mouseenter(e) {
            if (isEdit) return;
            _this.mouseIn = true;
          },
          mouseleave: function mouseleave(e) {
            if (isEdit) return;
            _this.mouseIn = false;
          }
        });
      }
      return cardProps;
    }
  },
  render: function render() {
    var h = arguments[0];
    var $slots = this.$slots;

    var props = this.getProps();
    return h(
      _antDesignVue.Card,
      props,
      [$slots['default']]
    );
  }
};