ten-design-vue/lib/table/table-body-cell.js

ten-vue

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _checkbox = _interopRequireDefault(require("../checkbox"));

var _radio = _interopRequireDefault(require("../radio"));

var _button = _interopRequireDefault(require("../button"));

var _tableCellMixin = _interopRequireDefault(require("./table-cell-mixin"));

var _helper = require("../scripts/utils/helper");

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

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var TYPE = ['selector', 'expand'];
var _default2 = {
  name: 'table-body-cell',
  inject: ['table'],
  mixins: [_tableCellMixin.default],
  props: {
    column: {
      type: Object,
      default: function _default() {}
    },
    row: {
      type: Object,
      default: function _default() {}
    },
    rowIndex: Number,
    colIndex: Number,
    expanded: Boolean
  },
  computed: {
    selectorChecked: function selectorChecked() {
      var _this = this;

      return !!this.table.selectedRowKeys.find(function (key) {
        return key === _this.rowKey;
      });
    },
    rowKey: function rowKey() {
      return this.table.getRowKey(this.row);
    },
    className: function className() {
      var _ref;

      var align = this.column.align;
      return ['ten-table__table-cell', (_ref = {}, _defineProperty(_ref, "ten-table__table-cell--align-".concat(align), align), _defineProperty(_ref, 'ten-table__table-cell--invisible', this.invisible), _defineProperty(_ref, 'first-child', this.colIndex === 0), _ref)];
    },
    tdProps: function tdProps() {
      var row = this.row,
          tdProps = this.column.tdProps,
          rowIndex = this.rowIndex;
      var props;

      if (typeof tdProps === 'function') {
        props = tdProps(row, rowIndex);
      } else if (_typeof(tdProps) === 'object') {
        props = tdProps;
      }

      return props || {};
    }
  },
  render: function render(h) {
    var row = this.row,
        column = this.column,
        rowIndex = this.rowIndex,
        tdProps = this.tdProps;
    var renderCell = column.renderCell,
        render = column.render,
        type = column.type,
        rowSpan = column.rowSpan,
        colSpan = column.colSpan;
    var content;

    if (TYPE.indexOf(type) > -1) {
      content = this["render".concat(type.replace(/^[a-z]/, function (letter) {
        return letter.toUpperCase();
      }))](h);
    } else if (renderCell && typeof renderCell === 'function') {
      content = renderCell({
        row: row,
        column: column,
        $index: rowIndex
      });
    } else {
      content = typeof render === 'function' ? render(h, {
        row: row,
        column: column,
        $index: rowIndex
      }) : (0, _helper.getValueByPath)(row, render);
    }

    var rs = this.spanHandler(rowSpan, rowIndex, row, column);
    var cs = this.spanHandler(colSpan, rowIndex, row, column);
    var hide = rs === 0 || cs === 0;
    var td;

    if (hide) {
      td = null;
    } else if (this.invisible) {
      td = h("td", (0, _babelHelperVueJsxMergeProps.default)([{
        "class": this.className,
        attrs: {
          colspan: cs,
          rowspan: rs
        }
      }, tdProps]));
    } else {
      td = h("td", (0, _babelHelperVueJsxMergeProps.default)([{
        "class": this.className,
        attrs: {
          colspan: cs,
          rowspan: rs
        }
      }, tdProps]), [content]);
    }

    return td;
  },
  methods: {
    renderSelector: function renderSelector(h) {
      // eslint-disable-line
      var Selector = this.column.selectType === 'radio' ? _radio.default : _checkbox.default;
      return h(Selector, {
        on: {
          "change": this.onSelectorChange
        },
        attrs: {
          checked: this.selectorChecked,
          disabled: !this.isSelectable()
        }
      });
    },
    onSelectorChange: function onSelectorChange(checked) {
      var _this2 = this;

      var selectedKeys = this.table.selectedRowKeys;

      if (this.column.selectType === 'radio') {
        if (checked) {
          selectedKeys = [this.rowKey];
        }
      } else {
        if (checked) {
          selectedKeys = this.table.selectedRowKeys.concat(this.rowKey);
        } else {
          selectedKeys = this.table.selectedRowKeys.filter(function (v) {
            return v !== _this2.rowKey;
          });
        }
      }

      this.table.changeSelected(selectedKeys);
    },
    renderExpand: function renderExpand() {
      var h = this.$createElement;
      return h(_button.default, {
        "class": "expand",
        attrs: {
          theme: "text",
          "icon-only": true,
          icon: this.expanded ? 'remove' : 'add',
          size: "small"
        },
        on: {
          "click": this.onExpandToggle
        }
      });
    },
    onExpandToggle: function onExpandToggle() {
      var _this3 = this;

      if (typeof this.rowKey === 'undefined') {
        console.warn("\u5F53\u524D\u6570\u636E\u672A\u53D1\u73B0 ".concat(this.table.rowKey, " \u5B57\u6BB5\uFF0C\u8BF7\u63D0\u4F9B rowKey \u5C5E\u6027."));
      }

      if (this.expanded) {
        this.table.$emit('update:expandedRowKeys', this.table.expandedRowKeys.filter(function (key) {
          return key !== _this3.rowKey;
        }));
      } else {
        this.table.$emit('update:expandedRowKeys', this.table.expandedRowKeys.concat(this.rowKey));
      }
    },
    spanHandler: function spanHandler(fn) {
      if (typeof fn !== 'function') return 1;

      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }

      var span = Number(fn.apply(void 0, args));
      return isNaN(span) ? 1 : span;
    },
    isSelectable: function isSelectable() {
      return (0, _helper.isFunction)(this.column.selectable) ? this.column.selectable(this.rowIndex, this.row) : true;
    }
  }
};
exports.default = _default2;