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

vue-ant-patterns

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';

var _methods;

import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { hasProp } from 'ant-design-vue/es/_util/props-util';
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
import { Button, Input } from 'ant-design-vue';
import Icon from '../d-icon';
import debounce from 'debounce';
import zhCN from '../d-language/global/zh_CN';

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: PropTypes.string.def('depot-quick-search'),
    locale: PropTypes.object,
    size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
    defaultValue: [String, Number],
    value: [String, Number]
  },
  created: function created() {
    this.debounceChange = debounce(this.handlerChange, 300);
    this.debounceSearch = debounce(this.handlerSearch, 400);
  },
  data: function data() {
    var _$props = this.$props,
        value = _$props.value,
        defaultValue = _$props.defaultValue;


    return {
      showInput: false,
      stateValue: fixControlledValue(!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 = _extends({}, zhCN, this.locale);
      result.lang = _extends({}, 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 (!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();
    }
  }, _defineProperty(_methods, 'close', function close() {
    this.showInput = false;
  }), _defineProperty(_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(Icon, {
          attrs: { type: 'close-circle', theme: 'filled' },
          on: {
            'click': this.emptyValue
          }
        }) : h('span'),
        size: size,
        defaultValue: stateValue
        // value: stateValue
      },

      attrs: _extends({}, this.$attrs),
      on: _extends({}, $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(Input, inputProps) : null, h(
        Button,
        _mergeJSXProps([buttonProps, {
          on: {
            'click': this.open
          }
        }]),
        [h(Icon, {
          attrs: { type: buttonStr }
        })]
      )]
    );
  }), _methods),

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

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

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

export default QuickSearch;