vue-ant-patterns/biz-lib/b-blur-query/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 _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _vueTypes2 = _interopRequireDefault(_vueTypes);

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

var slice = [].slice; /*
                       * @Author: w.pengfei
                       * @Date: 2020-07-05 16:56:01
                       * @LastEditTime: 2021-05-15 18:46:03
                       * @Description: ''
                       * @LastEditors: w.pengfei
                       */


var BlurQuery = {
  name: 'BBlurQuery',
  props: {
    size: _vueTypes2['default'].oneOf(['small', 'large', 'default']).def('default'),
    prefixCls: {
      type: String,
      'default': function _default() {
        return 'depot-biz-blur-query';
      }
    },
    table: {
      type: Object,
      'default': function _default() {
        return {};
      }
    }
  },
  created: function created() {},
  data: function data() {
    return {
      rawInnerHtmls: [],
      htmls: [],
      val: '',
      oldHTML: ''
    };
  },

  methods: {
    reset: function reset() {
      this.val = '';
      this.setInitStatus();
    },
    getAllText: function getAllText(node) {
      var gets = function gets(n) {
        var a = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

        var nodes = slice.call(n.childNodes);

        return nodes.reduce(function (m, ndeIt, idx, raw) {
          if (ndeIt.nodeType === 3) {
            m.push(ndeIt);
          } else {
            var tpChd = ndeIt.childNodes;
            if (ndeIt.nodeType === 1 && tpChd && tpChd.length) {
              gets(ndeIt, m);
            }
          }
          return m;
        }, a);
      };
      return gets(node);
    },
    getHtml: function getHtml() {
      var table = this.$props.table;

      var ele = this.getInstanceEle();
      if (!ele) return;
      var tables = ele.querySelectorAll('table');
      var tbodys = [];
      var aTds = [];
      var objCache = [];
      var slice = [].slice;
      tbodys = slice.call(tables).map(function (it) {
        var tbody = it.querySelectorAll('tbody');
        if (tbody && tbody.length) {
          return tbody[0];
        }
        return null;
      }).filter(function (t) {
        return t;
      });
      if (!this.rawInnerHtmls || !this.rawInnerHtmls.length) {
        tbodys.map(function (tbody) {
          var trs = slice.call(tbody.querySelectorAll('tr'));
          trs.map(function (tr) {
            var tds = slice.call(tr.querySelectorAll('td'));
            tds.map(function (td) {
              objCache.push({ td: td, oHtml: td.innerHTML, isReplace: false });
            });
          });
        });
        this.rawInnerHtmls = objCache;
      }
      aTds = [].concat((0, _toConsumableArray3['default'])(this.rawInnerHtmls));

      return aTds;
    },
    setHtml: function setHtml(val) {
      var _this = this;

      var prefixCls = this.$props.prefixCls;

      var aTds = this.getHtml();
      var cls = prefixCls + '-highlight';

      aTds.map(function (it) {
        var td = it.td;

        var nTextArr = _this.getAllText(td);

        nTextArr.map(function (text) {
          var tReg = new RegExp(val, 'gi');
          var isH = tReg.test(text.data);

          if (isH) {
            var s = document.createElement('span');

            var dataStr = text.data;
            dataStr = dataStr.replace(tReg, function ($00) {
              return '<span class="' + cls + '">' + $00 + '</span>';
            });
            it.isReplace = true;
            s.className = 'blur-replace';
            s.innerHTML = dataStr;
            text.parentNode.replaceChild(s, text);
          }
        });
      });
    },
    setInitStatus: function setInitStatus() {
      var _this2 = this;

      var rawInnerHtmls = this.rawInnerHtmls;

      rawInnerHtmls.map(function (it) {
        var td = it.td,
            oHtml = it.oHtml,
            isReplace = it.isReplace;

        if (isReplace) {
          td.innerHTML = oHtml;
        }
        _this2.rawInnerHtmls = [];
      });
    },
    validateVal: function validateVal(val) {
      var ele = this.getInstanceEle();
      if (!ele) return;
      var html = '';
      if (!this.oldHTML) {
        this.oldHTML = ele.innerHTML;
      }
      html = this.oldHTML;
      var reg = new RegExp(val, 'gi');
      return reg.test(html);
    },
    getInstanceEle: function getInstanceEle() {
      var table = this.$props.table;

      var vnodeObj = this.$createElement('span');
      var VNodeClass = vnodeObj.constructor;
      var ele = table.$el;

      if (!ele && table instanceof VNodeClass) {
        ele = table.elm;
      }
      return ele || null;
    }
  },
  render: function render() {
    var _this3 = this;

    var h = arguments[0];
    var $listenerts = this.$listenerts,
        val = this.val;
    var _$props = this.$props,
        table = _$props.table,
        prefixCls = _$props.prefixCls,
        size = _$props.size;

    var cls = '' + prefixCls;
    var inputProps = {
      props: {
        value: val,
        size: size
      },
      on: (0, _extends3['default'])({}, $listenerts, {
        change: function change(e) {
          _this3.val = e.target.value;
        },
        search: function search(value) {
          var ele = _this3.getInstanceEle();
          if (!ele) return;
          _this3.setInitStatus();
          if (ele && !value) {
            return;
          }

          var isContains = _this3.validateVal(value);

          if (ele && value && isContains) {
            _this3.setHtml(value);
          }
          _this3.$emit('search', value);
        }
      })
    };
    return h(
      'div',
      { 'class': cls },
      [h('a-input-search', (0, _babelHelperVueJsxMergeProps2['default'])([{ ref: 'inp' }, inputProps]))]
    );
  }
};

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

exports['default'] = BlurQuery;