@fe6/water-pro/lib/table-pro/src/hooks/use-columns.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

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

var _vue = require("vue");

var _shared = require("@fe6/shared");

var _lodashEs = require("lodash");

var _const = require("../const");

var _date = require("../date");

function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

// TODO [feat] 因为 /directives/click-outside.ts yarn pub 报错，所以暂缓支持
// import { renderEditCell } from '../components/editable';
var indexText = '序号';

function handleItem(item, ellipsis) {
  var key = item.key,
      dataIndex = item.dataIndex,
      children = item.children;
  item.align = item.align || _const.DEFAULT_ALIGN;

  if (ellipsis) {
    if (!key) {
      item.key = dataIndex;
    }

    if (!(0, _shared.isBoolean)(item.ellipsis)) {
      _extends(item, {
        ellipsis: ellipsis
      });
    }
  }

  if (children && children.length) {
    handleChildren(children, !!ellipsis);
  }
}

function handleChildren(children, ellipsis) {
  if (!children) {
    return;
  }

  children.forEach(function (item) {
    var children = item.children;
    handleItem(item, ellipsis);
    handleChildren(children, ellipsis);
  });
}

function handleIndexColumn(propsRef, getPaginationRef, columns) {
  var _unref = (0, _vue.unref)(propsRef),
      showIndexColumn = _unref.showIndexColumn,
      indexColumnProps = _unref.indexColumnProps,
      isTreeTable = _unref.isTreeTable;

  var pushIndexColumns = false;

  if ((0, _vue.unref)(isTreeTable)) {
    return;
  }

  columns.forEach(function () {
    var indIndex = columns.findIndex(function (column) {
      return column.flag === _const.INDEX_COLUMN_FLAG;
    });

    if (showIndexColumn) {
      pushIndexColumns = indIndex === -1;
    } else if (!showIndexColumn && indIndex !== -1) {
      columns.splice(indIndex, 1);
    }
  });

  if (!pushIndexColumns) {
    return;
  }

  var isFixedLeft = columns.some(function (item) {
    return item.fixed === 'left';
  });
  columns.unshift(_extends(_extends({
    flag: _const.INDEX_COLUMN_FLAG,
    width: 50,
    title: indexText,
    align: 'center',
    customRender: function customRender(_ref) {
      var index = _ref.index;
      var getPagination = (0, _vue.unref)(getPaginationRef);

      if ((0, _shared.isBoolean)(getPagination)) {
        return "".concat(index + 1);
      }

      var _getPagination$curren = getPagination.current,
          current = _getPagination$curren === void 0 ? 1 : _getPagination$curren,
          _getPagination$pageSi = getPagination.pageSize,
          pageSize = _getPagination$pageSi === void 0 ? _const.PAGE_SIZE : _getPagination$pageSi;
      return ((current < 1 ? 1 : current) - 1) * pageSize + index + 1;
    }
  }, isFixedLeft ? {
    fixed: 'left'
  } : {}), indexColumnProps));
}

function handleActionColumn(propsRef, columns) {
  var _unref2 = (0, _vue.unref)(propsRef),
      actionColumn = _unref2.actionColumn;

  if (!actionColumn) {
    return;
  }

  var hasIndex = columns.findIndex(function (column) {
    return column.flag === _const.ACTION_COLUMN_FLAG;
  });

  if (hasIndex === -1) {
    columns.push(_extends(_extends(_extends(_extends({}, columns[hasIndex]), {
      fixed: 'right'
    }), actionColumn), {
      flag: _const.ACTION_COLUMN_FLAG
    }));
  }
}

function useColumns(propsRef, getPaginationRef) {
  var columnsRef = (0, _vue.ref)((0, _vue.unref)(propsRef).columns);
  var cacheColumns = (0, _vue.unref)(propsRef).columns;
  var getColumnsRef = (0, _vue.computed)(function () {
    var columns = (0, _vue.unref)(columnsRef);
    handleIndexColumn(propsRef, getPaginationRef, columns);
    handleActionColumn(propsRef, columns);

    if (!columns) {
      return [];
    }

    var _unref3 = (0, _vue.unref)(propsRef),
        ellipsis = _unref3.ellipsis;

    var cloneColumns = (0, _lodashEs.cloneDeep)(columns);
    cloneColumns.forEach(function (item) {
      var customRender = item.customRender,
          slots = item.slots;
      handleItem(item, Reflect.has(item, 'ellipsis') ? !!item.ellipsis : !!ellipsis && !customRender && !slots);
    });
    return cloneColumns;
  });
  var getViewColumns = (0, _vue.computed)(function () {
    var viewColumns = sortFixedColumn((0, _vue.unref)(getColumnsRef));
    var columns = (0, _lodashEs.cloneDeep)(viewColumns);
    columns.forEach(function (column) {
      var slots = column.slots,
          dataIndex = column.dataIndex,
          customRender = column.customRender,
          format = column.format,
          edit = column.edit,
          flag = column.flag;

      if (!slots || !(slots === null || slots === void 0 ? void 0 : slots.title)) {
        column.slots = _extends({
          title: "header-".concat(dataIndex)
        }, slots || {});
        column.customTitle = column.customTitle || column.title;
        Reflect.deleteProperty(column, 'title');
      }

      var isDefaultAction = [_const.INDEX_COLUMN_FLAG, _const.ACTION_COLUMN_FLAG].includes(flag);

      if (!customRender && format && !edit && !isDefaultAction) {
        column.customRender = function (_ref2) {
          var text = _ref2.text,
              record = _ref2.record,
              index = _ref2.index;
          return formatCell(text, format, record, index);
        };
      }
    });
    return columns;
  });
  (0, _vue.watch)(function () {
    return (0, _vue.unref)(propsRef).columns;
  }, function (columns) {
    var _a;

    columnsRef.value = columns;
    cacheColumns = (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
      return !item.flag;
    })) !== null && _a !== void 0 ? _a : [];
  }); // watchEffect(() => {
  //   const columns = toRaw(unref(propsRef).columns);
  //   console.log('======================');
  //   console.log(111);
  //   console.log('======================');
  //   columnsRef.value = columns;
  //   cacheColumns = columns?.filter((item) => !item.flag) ?? [];
  // });

  function setCacheColumnsByField(dataIndex, value) {
    if (!dataIndex || !value) {
      return;
    }

    cacheColumns.forEach(function (item) {
      if (item.dataIndex === dataIndex) {
        _extends(item, value);
      }
    });
  }
  /**
   * set columns
   * @param columnList key｜column
   */


  function setColumns(columnList) {
    var columns = (0, _lodashEs.cloneDeep)(columnList);

    if (!(0, _shared.isArray)(columns)) {
      return;
    }

    if (columns.length <= 0) {
      columnsRef.value = [];
      return;
    }

    var firstColumn = columns[0];
    var cacheKeys = cacheColumns.map(function (item) {
      return item.dataIndex;
    });

    if (!(0, _shared.isString)(firstColumn)) {
      columnsRef.value = columns;
    } else {
      var columnKeys = columns;
      var newColumns = [];
      cacheColumns.forEach(function (item) {
        if (columnKeys.includes(item.dataIndex || item.key)) {
          newColumns.push(_extends(_extends({}, item), {
            defaultHidden: false
          }));
        }
      }); // Sort according to another array

      if (!(0, _lodashEs.isEqual)(cacheKeys, columns)) {
        newColumns.sort(function (prev, next) {
          return columnKeys.indexOf(prev.dataIndex) - columnKeys.indexOf(next.dataIndex);
        });
      }

      columnsRef.value = newColumns;
    }
  }

  function getColumns(opt) {
    var _ref3 = opt || {},
        ignoreIndex = _ref3.ignoreIndex,
        ignoreAction = _ref3.ignoreAction,
        sort = _ref3.sort;

    var columns = (0, _vue.toRaw)((0, _vue.unref)(getColumnsRef));

    if (ignoreIndex) {
      columns = columns.filter(function (item) {
        return item.flag !== _const.INDEX_COLUMN_FLAG;
      });
    }

    if (ignoreAction) {
      columns = columns.filter(function (item) {
        return item.flag !== _const.ACTION_COLUMN_FLAG;
      });
    }

    if (sort) {
      columns = sortFixedColumn(columns);
    }

    return columns;
  }

  function getCacheColumns() {
    return cacheColumns;
  }

  return {
    getColumnsRef: getColumnsRef,
    getCacheColumns: getCacheColumns,
    getColumns: getColumns,
    setColumns: setColumns,
    getViewColumns: getViewColumns,
    setCacheColumnsByField: setCacheColumnsByField
  };
}

function sortFixedColumn(columns) {
  var fixedLeftColumns = [];
  var fixedRightColumns = [];
  var defColumns = [];

  var _iterator = _createForOfIteratorHelper(columns),
      _step;

  try {
    for (_iterator.s(); !(_step = _iterator.n()).done;) {
      var column = _step.value;

      if (column.fixed === 'left') {
        fixedLeftColumns.push(column);
        continue;
      }

      if (column.fixed === 'right') {
        fixedRightColumns.push(column);
        continue;
      }

      defColumns.push(column);
    }
  } catch (err) {
    _iterator.e(err);
  } finally {
    _iterator.f();
  }

  var resultColumns = [].concat(fixedLeftColumns, defColumns, fixedRightColumns).filter(function (item) {
    return !item.defaultHidden;
  });
  return resultColumns;
} // format cell


function formatCell(text, format, record, index) {
  if (!format) {
    return text;
  } // custom function


  if ((0, _shared.isFunction)(format)) {
    return format(text, record, index);
  }

  try {
    // date type
    var DATE_FORMAT_PREFIX = 'date|';

    if ((0, _shared.isString)(format) && format.startsWith(DATE_FORMAT_PREFIX)) {
      var dateFormat = format.replace(DATE_FORMAT_PREFIX, '');

      if (!dateFormat) {
        return text;
      }

      return (0, _date.formatToDate)(text, dateFormat);
    } // enum


    if ((0, _shared.isPlainObject)(format) && Reflect.has(format, 'size')) {
      return format.get(text);
    }
  } catch (error) {
    return text;
  }
}