choerodon-ui/pro/es/table/query-bar/CombineSort.js

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

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useMemo, useState, useCallback } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { observer } from 'mobx-react-lite';
import { FieldType, SortOrder } from 'choerodon-ui/pro/lib/data-set/enum';
import Icon from '../../../../es/icon';
import Popover from '../../../../es/popover';
import Tag from '../../../../es/tag';
import DataSet from '../../data-set/DataSet';
import Select from '../../select';
import SelectBox from '../../select-box';
import Button from '../../button';
import { FuncType, ButtonColor } from '../../button/interface';
import { $l } from '../../locale-context';
var Option = SelectBox.Option;

var CombineSort = function CombineSort(props) {
  var dataSet = props.dataSet,
      prefixCls = props.prefixCls,
      sortableFieldNames = props.sortableFieldNames;
  var fields = dataSet.fields,
      combineSort = dataSet.props.combineSort;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var sortPrefixCls = "".concat(prefixCls, "-combine-sort");
  var sortFieldOptions = useMemo(function () {
    var sortFieldData = [];

    if (fields && sortableFieldNames && sortableFieldNames.length > 0) {
      fields.forEach(function (field) {
        if (sortableFieldNames.includes(field.name)) {
          sortFieldData.push({
            value: field.name,
            meaning: field.get('label') || field.name
          });
        }
      });
    }

    return new DataSet({
      autoQuery: false,
      autoCreate: false,
      paging: false,
      fields: [{
        name: 'value',
        type: FieldType.string
      }, {
        name: 'meaning',
        type: FieldType.string
      }],
      data: sortFieldData
    });
  }, [fields, sortableFieldNames]);
  var sortDS = useMemo(function () {
    var _dataSet$combineSortF = dataSet.combineSortFieldNames,
        combineSortFieldNames = _dataSet$combineSortF === void 0 ? new Map() : _dataSet$combineSortF;
    var data = [];
    combineSortFieldNames.forEach(function (sortOrder, fieldName) {
      var record = sortFieldOptions.records.find(function (record) {
        return record.get('value') === fieldName;
      });

      if (record) {
        var field = dataSet.getField(fieldName);
        data.push({
          sortName: fieldName,
          order: sortOrder || field && field.order || SortOrder.asc
        });
      }
    });
    return new DataSet({
      forceValidate: true,
      autoQuery: false,
      autoCreate: true,
      paging: false,
      fields: [{
        name: 'sortName',
        type: FieldType.string,
        options: sortFieldOptions
      }, {
        name: 'order',
        type: FieldType.string,
        defaultValue: SortOrder.asc
      }],
      data: data
    });
  }, [sortFieldOptions, dataSet, dataSet.combineSortFieldNames, visible]);

  var optionsFilter = function optionsFilter(record) {
    return sortDS.data.every(function (sortRecord) {
      return sortRecord.get('sortName') !== record.get('value');
    });
  };

  var onVisibleChange = function onVisibleChange(visible) {
    if (!visible) {
      sortDS.reset();
    }

    setVisible(visible);
  };

  var handleCancel = function handleCancel() {
    sortDS.reset();
    setVisible(false);
  };

  var handleConfirm = function handleConfirm() {
    sortDS.validate().then(function (result) {
      if (result) {
        var records = sortDS.data.filter(function (r) {
          return r.get('sortName') && r.get('order');
        });
        var sortInfo = new Map();
        records.forEach(function (record) {
          sortInfo.set(record.get('sortName'), record.get('order'));
        });
        dataSet.sort(sortInfo);
        setVisible(false);
      }
    });
  };

  var onDragEnd = useCallback(function (result) {
    if (result.destination) {
      sortDS.move(result.source.index, result.destination.index);
    }
  }, [sortDS, sortDS.data]);

  var SortDragItem = function SortDragItem(_ref) {
    var record = _ref.record,
        index = _ref.index;
    var key = record.key;
    return /*#__PURE__*/React.createElement(Draggable, {
      draggableId: String(key),
      index: record.index
    }, function (pro, snapshot) {
      return /*#__PURE__*/React.createElement("span", _extends({
        ref: pro.innerRef
      }, pro.draggableProps, {
        className: "".concat(sortPrefixCls, "-list-item").concat(snapshot.isDragging ? " ".concat(sortPrefixCls, "-list-item-dragging") : '')
      }), /*#__PURE__*/React.createElement("span", _extends({}, pro.dragHandleProps, {
        className: "".concat(sortPrefixCls, "-list-item-drag")
      }), /*#__PURE__*/React.createElement(Icon, {
        type: "baseline-drag_indicator"
      })), /*#__PURE__*/React.createElement("span", {
        className: "".concat(sortPrefixCls, "-list-item-index")
      }, /*#__PURE__*/React.createElement(Tag, null, index + 1)), /*#__PURE__*/React.createElement(Select, {
        placeholder: $l('Table', 'please_select_column'),
        className: "".concat(sortPrefixCls, "-list-item-sortName"),
        record: record,
        name: "sortName",
        optionsFilter: optionsFilter,
        notFoundContent: $l('Table', 'no_save_filter'),
        clearButton: false
      }), /*#__PURE__*/React.createElement(SelectBox, {
        record: record,
        name: "order",
        className: "".concat(sortPrefixCls, "-list-item-sortOrder")
      }, /*#__PURE__*/React.createElement(Option, {
        value: SortOrder.asc
      }, $l('Table', 'ascending')), /*#__PURE__*/React.createElement(Option, {
        value: SortOrder.desc
      }, $l('Table', 'descending'))), /*#__PURE__*/React.createElement(Button, {
        className: "".concat(sortPrefixCls, "-list-item-delete"),
        icon: 'delete_black-o',
        funcType: FuncType.link,
        color: ButtonColor.primary,
        onClick: function onClick() {
          return sortDS["delete"](record, false);
        }
      }));
    });
  };

  var popupContent = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(sortPrefixCls, "-content")
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(sortPrefixCls, "-body")
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(sortPrefixCls, "-list-container")
    }, /*#__PURE__*/React.createElement(DragDropContext, {
      onDragEnd: onDragEnd
    }, /*#__PURE__*/React.createElement(Droppable, {
      droppableId: "combine-sort",
      direction: "vertical"
    }, function (provided) {
      return /*#__PURE__*/React.createElement("div", _extends({
        ref: provided.innerRef
      }, provided.droppableProps, {
        className: "".concat(sortPrefixCls, "-list")
      }), sortDS.data.map(function (record, index) {
        var key = record.key;
        return /*#__PURE__*/React.createElement(SortDragItem, {
          key: key,
          record: record,
          index: index
        });
      }), provided.placeholder);
    }))), /*#__PURE__*/React.createElement("div", {
      className: "".concat(sortPrefixCls, "-add-button")
    }, /*#__PURE__*/React.createElement(Button, {
      funcType: FuncType.link,
      icon: "add",
      onClick: function onClick() {
        return sortDS.create();
      },
      color: ButtonColor.primary,
      disabled: sortDS.data.length >= sortFieldOptions.records.length
    }, $l('Table', 'add_sort')))), /*#__PURE__*/React.createElement("div", {
      className: "".concat(sortPrefixCls, "-footer")
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: handleCancel
    }, $l('Modal', 'cancel')), /*#__PURE__*/React.createElement(Button, {
      onClick: handleConfirm,
      color: ButtonColor.primary
    }, $l('Modal', 'ok'))));
  }, [onDragEnd, sortFieldOptions, sortDS, sortDS.data]);

  if (!combineSort || !sortableFieldNames || sortableFieldNames.length === 0) {
    return null;
  }

  return /*#__PURE__*/React.createElement(Popover, {
    trigger: "click",
    overlayClassName: "".concat(sortPrefixCls, "-popover"),
    title: $l('Table', 'custom_sort'),
    content: popupContent,
    visible: visible,
    onVisibleChange: onVisibleChange,
    placement: "bottomLeft"
  }, /*#__PURE__*/React.createElement(Button, {
    icon: "paixu-xia",
    funcType: FuncType.link,
    color: ButtonColor.primary,
    className: "".concat(sortPrefixCls, "-trigger-button")
  }));
};

CombineSort.displayName = 'CombineSort';
export default observer(CombineSort);
//# sourceMappingURL=CombineSort.js.map