vue-ant-patterns/lib/d-quick-search/index.js

vue-ant-patterns

'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

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

var _extends3 = _interopRequireDefault(_extends2);

var _methods;

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 _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 classSizeMp = {
  small: '-sm',
  large: '-lg',
  'default': ''
};

function fixControlledValue(value) {
  if (typeof value === 'undefined' || value === null) {
    return '';
  }
  return value;
}
var QuickSearch = {
  name: 'DQuickSearch',
  props: {
    prefixCls: _vueTypes2['default'].string.def('depot-quick-search'),
    locale: _vueTypes2['default'].object,
    size: _vueTypes2['default'].oneOf(['small', 'large', 'default']).def('default'),
    defaultValue: [String, Number],
    value: [String, Number]
  },
  created: function created() {
    this.debounceChange = (0, _debounce2['default'])(this.handlerChange, 300);
    this.debounceSearch = (0, _debounce2['default'])(this.handlerSearch, 400);
  },
  data: function data() {
    var _$props = this.$props,
        value = _$props.value,
        defaultValue = _$props.defaultValue;


    return {
      showInput: false,
      stateValue: fixControlledValue(!(0, _propsUtil.hasProp)(this, 'value') ? defaultValue : value)
      // suffix: false,
    };
  },

  model: {
    prop: 'value',
    event: 'change.value'
  },
  watch: {
    value: function value(val) {
      this.stateValue = fixControlledValue(val);
    }
  },
  methods: (_methods = {
    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() {
      if (this.showInput) {
        this.$emit('close');
      }
      this.showInput = !this.showInput;
    },
    close: function close() {
      this.showInput = false;
      this.$emit('close');
    },
    handlerChange: function handlerChange(e, val) {
      if (!(0, _propsUtil.hasProp)(this, 'value')) {
        this.stateValue = e.target.value;
      } else {
        this.$forceUpdate();
      }
      if (!e.target.composing) {
        this.$emit('change.value', e.target.value);
      }
      this.$emit('change', e, val);
      this.$emit('input', e, val);
    },
    handlerSearch: function handlerSearch(e, val) {
      this.$emit('search', e, val);
    },
    emptyValue: function emptyValue(e) {
      this.stateValue = '';
      this.$refs.autoref.stateValue = '';
      this.$emit('clear');
      this.$refs.autoref.focus();
    }
  }, (0, _defineProperty3['default'])(_methods, 'close', function close() {
    this.showInput = false;
  }), (0, _defineProperty3['default'])(_methods, 'renderComponent', function renderComponent(contextLocale, locale) {
    var _this = this;

    var h = this.$createElement;
    var prefixCls = this.prefixCls,
        $listeners = this.$listeners,
        showInput = this.showInput,
        size = this.size,
        stateValue = this.stateValue,
        $slots = this.$slots;


    var buttonStr = showInput ? 'close' : 'search';
    var props = {
      'class': prefixCls
    };

    var inputProps = {
      ref: 'autoref',
      'class': 'quick-search-input',

      props: {
        placeholder: contextLocale.searchPlaceholder,
        suffix: stateValue ? h(_dIcon2['default'], {
          attrs: { type: 'close-circle', theme: 'filled' },
          on: {
            'click': this.emptyValue
          }
        }) : h('span'),
        size: size,
        defaultValue: stateValue
        // value: stateValue
      },

      attrs: (0, _extends3['default'])({}, this.$attrs),
      on: (0, _extends3['default'])({}, $listeners, {
        change: function change(e) {
          var value = e.target.value;

          _this.debounceChange(e, value);
        },
        pressEnter: function pressEnter(e) {
          var value = e.target.value;

          _this.debounceSearch(e, value);
        },
        blur: function blur(e) {
          _this.$emit('blur', e);
        }
      })
    };

    var buttonProps = {
      props: {
        size: size
      },
      key: 'quick-search-button',
      'class': 'icon-button icon-button' + classSizeMp[size]
    };
    var customRender = $slots.customRender;
    return h(
      'span',
      props,
      [showInput ? customRender ? customRender : h(_antDesignVue.Input, inputProps) : null, h(
        _antDesignVue.Button,
        (0, _babelHelperVueJsxMergeProps2['default'])([buttonProps, {
          on: {
            'click': this.open
          }
        }]),
        [h(_dIcon2['default'], {
          attrs: { type: buttonStr }
        })]
      )]
    );
  }), _methods),

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

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

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

exports['default'] = QuickSearch;