@fe6/water-pro/lib/table-pro/src/components/settings/column-setting.js

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

"use strict";

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

var _vue = require("vue");

var _iconsVue = require("@ant-design/icons-vue/lib/icons");

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

var _popover = _interopRequireDefault(require("../../../../popover"));

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

var _divider = _interopRequireDefault(require("../../../../divider"));

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

var _containerScroll = _interopRequireDefault(require("../../../../container-scroll/container-scroll"));

var _tooltip = _interopRequireDefault(require("../../../../tooltip"));

var _useConfigInject2 = _interopRequireDefault(require("../../../../_util/hooks/useConfigInject"));

var _dom = require("../../../../_util/dom");

var _useSortable2 = require("../../../../_util/hooks/use-sortable");

var _useTableContext = require("../../hooks/use-table-context");

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

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); }

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 _default2 = (0, _vue.defineComponent)({
  name: 'ColumnSetting',
  components: _defineProperty({
    SettingOutlined: _iconsVue.SettingOutlined,
    DragOutlined: _iconsVue.DragOutlined,
    ContainerScroll: _containerScroll.default,
    Divider: _divider.default,
    LeftOutlined: _iconsVue.LeftOutlined,
    RightOutlined: _iconsVue.RightOutlined
  }, _button.default.name, _button.default),
  props: {
    prefixCls: String
  },
  setup: function setup(props) {
    var _useConfigInject = (0, _useConfigInject2.default)('table-pro-basic-column-setting', props),
        prefixClsNew = _useConfigInject.prefixCls;

    var table = (0, _useTableContext.useTableContext)();
    var defaultRowSelection = table.getRowSelection();
    var inited = false;
    var cachePlainOptions = (0, _vue.ref)([]);
    var plainOptions = (0, _vue.ref)([]);
    var plainSortOptions = (0, _vue.ref)([]);
    var columnListRef = (0, _vue.ref)(null);
    var state = (0, _vue.reactive)({
      indeterminate: false,
      checkAll: true,
      checkedList: [],
      defaultCheckList: []
    });
    var checkIndex = (0, _vue.ref)(false);
    var checkSelect = (0, _vue.ref)(false);
    var getValues = (0, _vue.computed)(function () {
      return (0, _vue.unref)(table === null || table === void 0 ? void 0 : table.getBindValues) || {};
    });
    (0, _vue.watchEffect)(function () {
      var columns = table.getColumns();

      if (columns.length) {
        init();
      }
    });
    (0, _vue.watchEffect)(function () {
      var values = (0, _vue.unref)(getValues);
      checkIndex.value = !!values.showIndexColumn;
      checkSelect.value = !!values.rowSelection;
    });

    function getColumns() {
      var ret = [];
      table.getColumns({
        ignoreIndex: true,
        ignoreAction: true
      }).forEach(function (item) {
        ret.push(_extends({
          label: item.title || item.customTitle,
          value: item.dataIndex || item.title
        }, item));
      });
      return ret;
    }

    function init() {
      var columns = getColumns();
      var checkList = table.getColumns().map(function (item) {
        if (item.defaultHidden) {
          return '';
        }

        return item.dataIndex || item.title;
      }).filter(Boolean);

      if (!plainOptions.value.length) {
        plainOptions.value = columns;
        plainSortOptions.value = columns;
        cachePlainOptions.value = columns;
        state.defaultCheckList = checkList;
      } else {
        // const fixedColumns = columns.filter((item) =>
        //   Reflect.has(item, 'fixed')
        // ) as BasicColumn[];
        (0, _vue.unref)(plainOptions).forEach(function (item) {
          var findItem = columns.find(function (col) {
            return col.dataIndex === item.dataIndex;
          });

          if (findItem) {
            item.fixed = findItem.fixed;
          }
        });
      }

      state.checkedList = checkList;
    } // checkAll change


    function onCheckAllChange(e) {
      state.indeterminate = false;
      var checkList = plainOptions.value.map(function (item) {
        return item.value;
      });

      if (e.target.checked) {
        state.checkedList = checkList;
        table.setColumns(checkList);
      } else {
        state.checkedList = [];
        table.setColumns([]);
      }
    } // Trigger when check/uncheck a column


    function onChange(checkedList) {
      var len = plainOptions.value.length;
      state.indeterminate = !!checkedList.length && checkedList.length < len;
      state.checkAll = checkedList.length === len;
      var sortList = (0, _vue.unref)(plainSortOptions).map(function (item) {
        return item.value;
      });
      checkedList.sort(function (prev, next) {
        return sortList.indexOf(prev) - sortList.indexOf(next);
      });
      table.setColumns(checkedList);
    } // reset columns


    function reset() {
      state.checkedList = _toConsumableArray(state.defaultCheckList);
      state.checkAll = true;
      state.indeterminate = false;
      plainOptions.value = (0, _vue.unref)(cachePlainOptions);
      plainSortOptions.value = (0, _vue.unref)(cachePlainOptions);
      table.setColumns(table.getCacheColumns());
    } // Open the pop-up window for drag and drop initialization


    function handleVisibleChange() {
      if (inited) {
        return;
      }

      (0, _vue.nextTick)(function () {
        var columnListEl = (0, _vue.unref)(columnListRef);

        if (!columnListEl) {
          return;
        }

        var el = columnListEl.$el;

        if (!el) {
          return;
        } // Drag and drop sort


        var _useSortable = (0, _useSortable2.useSortable)(el, {
          handle: ".".concat(prefixClsNew.value, "-coulmn-drag-icon"),
          onEnd: function onEnd(evt) {
            var oldIndex = evt.oldIndex,
                newIndex = evt.newIndex;

            if ((0, _shared.isUndefined)(oldIndex) && (0, _shared.isNull)(oldIndex) || (0, _shared.isUndefined)(newIndex) && (0, _shared.isNull)(newIndex) || oldIndex === newIndex) {
              return;
            } // Sort column


            // Sort column
            var columns = getColumns();
            var oldIndexNumber = oldIndex;
            var newIndexNumber = newIndex;

            if (oldIndexNumber > newIndexNumber) {
              columns.splice(newIndexNumber, 0, columns[oldIndexNumber]);
              columns.splice(oldIndexNumber + 1, 1);
            } else {
              columns.splice(newIndexNumber + 1, 0, columns[oldIndexNumber]);
              columns.splice(oldIndexNumber, 1);
            }

            plainSortOptions.value = columns;
            plainOptions.value = columns;
            table.setColumns(columns);
          }
        }),
            initSortable = _useSortable.initSortable;

        initSortable();
        inited = true;
      });
    } // Control whether the serial number column is displayed


    function handleIndexCheckChange(e) {
      table.setProps({
        showIndexColumn: e.target.checked
      });
    } // Control whether the check box is displayed


    function handleSelectCheckChange(e) {
      table.setProps({
        rowSelection: e.target.checked ? defaultRowSelection : undefined
      });
    }

    function handleColumnFixed(item, fixed) {
      var _a;

      if (!state.checkedList.includes(item.dataIndex)) {
        return;
      }

      var columns = getColumns();
      var isFixed = item.fixed === fixed ? false : fixed;
      var index = columns.findIndex(function (col) {
        return col.dataIndex === item.dataIndex;
      });

      if (index !== -1) {
        columns[index].fixed = isFixed;
      }

      item.fixed = isFixed;

      if (isFixed && !item.width) {
        item.width = 100;
      }

      (_a = table.setCacheColumnsByField) === null || _a === void 0 ? void 0 : _a.call(table, item.dataIndex, {
        fixed: isFixed
      });
      table.setColumns(columns);
    }

    return _extends(_extends({}, (0, _vue.toRefs)(state)), {
      onCheckAllChange: onCheckAllChange,
      onChange: onChange,
      plainOptions: plainOptions,
      reset: reset,
      prefixClsNew: prefixClsNew,
      columnListRef: columnListRef,
      handleVisibleChange: handleVisibleChange,
      checkIndex: checkIndex,
      checkSelect: checkSelect,
      handleIndexCheckChange: handleIndexCheckChange,
      handleSelectCheckChange: handleSelectCheckChange,
      defaultRowSelection: defaultRowSelection,
      handleColumnFixed: handleColumnFixed,
      getPopupContainer: _dom.getPopupContainer
    });
  },
  render: function render() {
    var _this = this;

    var popoverTitleNode = (0, _vue.createVNode)("div", {
      "class": "".concat(this.prefixClsNew, "__popover-title")
    }, [(0, _vue.createVNode)(_checkbox.default, {
      "checked": this.checkAll,
      "indeterminate": this.indeterminate,
      "onChange": this.onCheckAllChange
    }, {
      default: function _default() {
        return [(0, _vue.createTextVNode)("\u5217\u5C55\u793A")];
      }
    }), (0, _vue.createVNode)(_checkbox.default, {
      "checked": this.checkIndex,
      "onChange": this.handleIndexCheckChange
    }, {
      default: function _default() {
        return [(0, _vue.createTextVNode)("\u5E8F\u53F7\u5217")];
      }
    }), (0, _vue.createVNode)(_checkbox.default, {
      "checked": this.checkSelect,
      "disabled": !this.defaultRowSelection,
      "onChange": this.handleSelectCheckChange
    }, {
      default: function _default() {
        return [(0, _vue.createTextVNode)("\u52FE\u9009\u5217")];
      }
    }), (0, _vue.createVNode)((0, _vue.resolveComponent)("a-button"), {
      "size": "small",
      "type": "link",
      "onClick": this.reset
    }, {
      default: function _default() {
        return [' ', (0, _vue.createTextVNode)("\u91CD\u7F6E"), ' '];
      }
    })]);
    var popoverCheckNodes = [];
    var popoverCheckToolTipLeftSlot = {
      title: function title() {
        return '固定到左侧';
      }
    };
    var popoverCheckToolTipRightSlot = {
      title: function title() {
        return '固定到右侧';
      }
    };
    this.plainOptions.forEach(function (item) {
      var pItemNode = (0, _vue.createVNode)("div", {
        "class": "".concat(_this.prefixClsNew, "__check-item")
      }, [(0, _vue.createVNode)(_iconsVue.DragOutlined, {
        "class": "".concat(_this.prefixClsNew, "-coulmn-drag-icon")
      }, null), (0, _vue.createVNode)(_checkbox.default, {
        "value": item.value,
        "disabled": item.label === 'Action'
      }, {
        default: function _default() {
          return [item.label];
        }
      }), (0, _vue.createVNode)(_tooltip.default, {
        "placement": "bottomLeft",
        "mouse-leave-delay": 0.4
      }, _objectSpread({
        default: function _default() {
          return [(0, _vue.createVNode)(_iconsVue.LeftOutlined, {
            "icon": "line-md:arrow-align-left",
            "class": ["".concat(_this.prefixClsNew, "__fixed-left"), {
              active: item.fixed === 'left',
              disabled: !_this.checkedList.includes(item.value)
            }],
            "onClick": function onClick() {
              return _this.handleColumnFixed(item, 'left');
            }
          }, null)];
        }
      }, popoverCheckToolTipLeftSlot)), (0, _vue.createVNode)(_divider.default, {
        "type": "vertical"
      }, null), (0, _vue.createVNode)(_tooltip.default, {
        "placement": "bottomLeft",
        "mouse-leave-delay": 0.4
      }, _objectSpread({
        default: function _default() {
          return [(0, _vue.createVNode)(_iconsVue.RightOutlined, {
            "class": ["".concat(_this.prefixClsNew, "__fixed-right"), {
              active: item.fixed === 'right',
              disabled: !_this.checkedList.includes(item.value)
            }],
            "onClick": function onClick() {
              return _this.handleColumnFixed(item, 'right');
            }
          }, null)];
        }
      }, popoverCheckToolTipRightSlot))]);
      popoverCheckNodes.push(pItemNode);
    });
    var popoverContentNode = (0, _vue.createVNode)(_containerScroll.default, null, {
      default: function _default() {
        return [(0, _vue.createVNode)(_checkbox.default.Group, {
          "ref": "columnListRef",
          "value": _this.checkedList,
          "onChange": _this.onChange
        }, {
          default: function _default() {
            return [popoverCheckNodes];
          }
        })];
      }
    });
    var popoverSlot = {
      title: function title() {
        return popoverTitleNode;
      },
      content: function content() {
        return popoverContentNode;
      },
      default: function _default() {
        return (0, _vue.createVNode)(_iconsVue.SettingOutlined, null, null);
      }
    };
    var toolTipDefaultNode = (0, _vue.createVNode)(_popover.default, {
      "placement": "bottomLeft",
      "trigger": "click",
      "overlay-class-name": "".concat(this.prefixClsNew, "__cloumn-list"),
      "onVisibleChange": this.handleVisibleChange
    }, popoverSlot);
    var toolTipSlot = {
      title: function title() {
        return (0, _vue.createVNode)("span", null, [(0, _vue.createTextVNode)("\u5217\u8BBE\u7F6E")]);
      },
      default: function _default() {
        return toolTipDefaultNode;
      }
    };
    return (0, _vue.createVNode)(_tooltip.default, {
      "placement": "top"
    }, toolTipSlot);
  }
});

exports.default = _default2;