vue-ant-patterns/lib/d-auto-complete/index.js

vue-ant-patterns

'use strict';

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

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

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

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _propsUtil = require('ant-design-vue/lib/_util/props-util');

var _LocaleReceiver = require('ant-design-vue/lib/locale-provider/LocaleReceiver');

var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);

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

var _dIcon = require('../d-icon');

var _dIcon2 = _interopRequireDefault(_dIcon);

var _dIconButton = require('../d-icon-button');

var _dIconButton2 = _interopRequireDefault(_dIconButton);

var _dContainer = require('../d-container');

var _dContainer2 = _interopRequireDefault(_dContainer);

var _debounce = require('debounce');

var _debounce2 = _interopRequireDefault(_debounce);

var _zh_CN = require('../d-language/global/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

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

var Option = _antDesignVue.AutoComplete.Option,
    AutoCompleteProps = _antDesignVue.AutoComplete.props;
var Horizontal = _dContainer2['default'].Horizontal;


var DataSourceItemObject = _vueTypes2['default'].shape({
  value: String,
  text: String
}).loose;
var DataSourceItemType = _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, DataSourceItemObject]).isRequired;

var noop = function noop() {};
var DAutoComplete = {
  name: 'DAutoComplete',
  props: {
    prefixCls: _vueTypes2['default'].string.def('depot-auto-complete'),
    locale: _vueTypes2['default'].object,
    dataSource: _vueTypes2['default'].arrayOf(DataSourceItemType),
    dropdownMatchSelectWidth: _vueTypes2['default'].bool,
    dropdownStyle: _vueTypes2['default'].object,
    inputWidth: _vueTypes2['default'].string.def('300px'),
    optionLabelProp: _vueTypes2['default'].string.def('title'),
    autoFocus: _vueTypes2['default'].bool.def(true),
    tagItemList: _vueTypes2['default'].array.def([]),
    dropdownClassName: _vueTypes2['default'].string.def(''),
    showFilter: _vueTypes2['default'].bool.def(true)
    // renderKeys: PropTypes.shape({
    //   text: 'name',
    //   value: 'name',
    //   key: 'id',
    // }),
  },

  watch: {
    tagItemList: function tagItemList(newVal, oldVal) {
      this.localTagItemList = newVal;
    }
  },
  created: function created() {
    // const { $listeners } = this;
    this.debounceChange = (0, _debounce2['default'])(this.handlerChange, 300);
    this.debounceSearch = (0, _debounce2['default'])(this.handlerSearch, 400);
  },
  data: function data() {
    var tagItemList = this.$props.tagItemList;

    return {
      showInput: false,
      show: true,
      events: {},
      currentEvent: '',
      localTagItemList: tagItemList, // 标签
      searchVal: '' // 双向绑定的变化
    };
  },

  methods: {
    renderOptions: function renderOptions() {
      var h = this.$createElement;
      var $slots = this.$slots,
          dataSource = this.dataSource;

      var childArray = (0, _propsUtil.filterEmpty)($slots['default']);
      var options = void 0;
      if (childArray.length) {
        options = childArray;
      } else {
        options = dataSource ? dataSource.map(function (item) {
          switch (typeof item === 'undefined' ? 'undefined' : (0, _typeof3['default'])(item)) {
            case 'string':
              return h(
                Option,
                { key: item },
                [item]
              );
            case 'object':
              return h(
                Option,
                { key: item.value },
                [item.text]
              );
            default:
              throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
          }
        }) : [];
      }
      return options;
    },
    getDefaultLocale: function getDefaultLocale() {
      var result = (0, _extends3['default'])({}, _zh_CN2['default'], this.locale);
      result.lang = (0, _extends3['default'])({}, result.lang, (this.locale || {}).lang);
      return result;
    },
    open: function open() {
      this.showInput = !this.showInput;
    },
    close: function close() {
      this.showInput = false;
    },
    handlerChange: function handlerChange(val) {
      if (val === undefined) {
        this.$emit('clear');
        return;
      }
      this.$emit('change', val);
    },
    handlerSearch: function handlerSearch(val) {
      this.$emit('search', val);
    },


    // 移除标签
    handleTagRemoveClick: function handleTagRemoveClick(obj) {
      this.$emit('removeTag', obj);
      this.$refs.autoref.focus(); // 手动触发焦点，否则失去焦点，搜索框不显示了
    },

    // 清空输入框的值
    clearVal: function clearVal() {
      this.searchVal = '';
      this.$emit('change', '');
    },
    renderComponent: function renderComponent(contextLocale, locale) {
      var _props,
          _this = this;

      var h = this.$createElement;
      var $slots = this.$slots,
          $listeners = this.$listeners,
          showInput = this.showInput,
          show = this.show,
          localTagItemList = this.localTagItemList,
          searchVal = this.searchVal,
          showFilter = this.showFilter;
      var _$props = this.$props,
          prefixCls = _$props.prefixCls,
          dataSource = _$props.dataSource,
          inputWidth = _$props.inputWidth,
          optionLabelProp = _$props.optionLabelProp,
          autoFocus = _$props.autoFocus;


      var buttonStr = showInput ? 'close' : 'search';
      var title = showInput ? contextLocale['close'] || '关闭' : contextLocale['search'] || '搜索';
      var props = {
        'class': prefixCls
      };
      // const transitionCls =
      var inputProps = {
        ref: 'autoref',
        'class': prefixCls + '-input',

        props: (_props = {
          placeholder: contextLocale.searchPlaceholder,
          optionLabelProp: optionLabelProp,
          allowClear: true,
          dropdownClassName: prefixCls + '-overlay',
          dropdownMatchSelectWidth: this.$props.dropdownMatchSelectWidth,
          dropdownStyle: this.$props.dropdownStyle
        }, (0, _defineProperty3['default'])(_props, 'dropdownClassName', this.$props.dropdownClassName ? this.$props.dropdownClassName + ' ' + prefixCls + '-overlay' : prefixCls + '-overlay'), (0, _defineProperty3['default'])(_props, 'autoFocus', autoFocus), (0, _defineProperty3['default'])(_props, 'value', searchVal), _props),
        on: {
          change: function change(val) {
            /*
              ant vue 在触发 select 事件后也会触发 change 事件
              正常应该是如果事件为 select, 就不在处理 change 了
            */
            if (_this.currentEvent === 'select') {
              _this.currentEvent = '';
              return;
            }
            _this.debounceChange(val);
          },
          select: function select(value, option) {
            _this.currentEvent = 'select';
            _this.searchVal = '';
            /*
              ant vue 组件问题, 偶尔会出现选中节点后光标位置不准缺的问题
              临时解决方法: 丢失焦点
             */
            setTimeout(function () {
              if (_this.$refs && _this.$refs.autoref) {
                _this.$refs.autoref.blur();
              }
              _this.showInput = false;
            }, 200);

            _this.$emit('select', value, option);
          },
          search: function search(val) {
            _this.debounceSearch(val);
            _this.searchVal = val;
          },
          blur: function blur() {
            _this.showInput = false;
            _this.$emit('blur');
          }
        },
        style: {
          width: inputWidth
        }
      };
      var iconProps = {
        key: 'header-search',
        attrs: { title: title },
        on: {
          click: function click() {
            _this.open();
          }
        }
      };

      var filterIconProps = {
        'class': 'filter-search-icon',
        on: {
          click: function click(e) {
            e.stopPropagation();
            var searchVal = _this.searchVal,
                localTagItemList = _this.localTagItemList;

            _this.$emit('filter', searchVal, localTagItemList);
          }
        }
      };
      return h(
        Horizontal,
        (0, _babelHelperVueJsxMergeProps2['default'])([{
          attrs: { align: 'center', justify: 'start' }
        }, props]),
        [h(
          'transition',
          {
            attrs: { name: 'headrSearchMove' }
          },
          [showInput ? h(
            _antDesignVue.AutoComplete,
            inputProps,
            [h(
              'template',
              { slot: 'dataSource' },
              [this.renderOptions()]
            ), h('a-input', [h(
              'template',
              { slot: 'addonBefore' },
              [h(
                'ul',
                { 'class': 'item-tag-wrapper-ul' },
                [localTagItemList.map(function (item) {
                  return h(
                    'li',
                    { 'class': 'item-li', key: '' + item.labelId },
                    [h(
                      'span',
                      { 'class': 'item-name', attrs: { title: item.showValue }
                      },
                      [item.showValue]
                    ), h(
                      'span',
                      {
                        'class': 'remove-item-icon',
                        on: {
                          'click': function click(e) {
                            e.stopPropagation();
                            _this.handleTagRemoveClick(item);
                          }
                        }
                      },
                      [h('a-icon', {
                        attrs: { type: 'close' }
                      })]
                    )]
                  );
                })]
              )]
            ), showFilter ? h('a-icon', (0, _babelHelperVueJsxMergeProps2['default'])([{ slot: 'suffix', attrs: { type: 'filter' }
            }, filterIconProps])) : null])]
          ) : null]
        ), h(
          _dIconButton2['default'],
          iconProps,
          [h(_dIcon2['default'], {
            attrs: { type: buttonStr }
          })]
        )]
      );
    }
  },

  render: function render() {
    var h = arguments[0];

    return h(_LocaleReceiver2['default'], {
      attrs: {
        componentName: 'Global',
        defaultLocale: this.getDefaultLocale
      },
      scopedSlots: { 'default': this.renderComponent }
    });
  }
};

DAutoComplete.install = function (Vue) {
  Vue.component(DAutoComplete.name, DAutoComplete);
};

exports['default'] = DAutoComplete;