choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
278 lines (239 loc) • 10.3 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactBeautifulDnd = require("react-beautiful-dnd");
var _mobxReactLite = require("mobx-react-lite");
var _enum = require("choerodon-ui/pro/lib/data-set/enum");
var _icon = _interopRequireDefault(require("../../../../lib/icon"));
var _popover = _interopRequireDefault(require("../../../../lib/popover"));
var _tag = _interopRequireDefault(require("../../../../lib/tag"));
var _DataSet = _interopRequireDefault(require("../../data-set/DataSet"));
var _select = _interopRequireDefault(require("../../select"));
var _selectBox = _interopRequireDefault(require("../../select-box"));
var _button = _interopRequireDefault(require("../../button"));
var _interface = require("../../button/interface");
var _localeContext = require("../../locale-context");
var Option = _selectBox["default"].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 = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var sortPrefixCls = "".concat(prefixCls, "-combine-sort");
var sortFieldOptions = (0, _react.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["default"]({
autoQuery: false,
autoCreate: false,
paging: false,
fields: [{
name: 'value',
type: _enum.FieldType.string
}, {
name: 'meaning',
type: _enum.FieldType.string
}],
data: sortFieldData
});
}, [fields, sortableFieldNames]);
var sortDS = (0, _react.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 || _enum.SortOrder.asc
});
}
});
return new _DataSet["default"]({
forceValidate: true,
autoQuery: false,
autoCreate: true,
paging: false,
fields: [{
name: 'sortName',
type: _enum.FieldType.string,
options: sortFieldOptions
}, {
name: 'order',
type: _enum.FieldType.string,
defaultValue: _enum.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 = (0, _react.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["default"].createElement(_reactBeautifulDnd.Draggable, {
draggableId: String(key),
index: record.index
}, function (pro, snapshot) {
return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({
ref: pro.innerRef
}, pro.draggableProps, {
className: "".concat(sortPrefixCls, "-list-item").concat(snapshot.isDragging ? " ".concat(sortPrefixCls, "-list-item-dragging") : '')
}), /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, pro.dragHandleProps, {
className: "".concat(sortPrefixCls, "-list-item-drag")
}), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "baseline-drag_indicator"
})), /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(sortPrefixCls, "-list-item-index")
}, /*#__PURE__*/_react["default"].createElement(_tag["default"], null, index + 1)), /*#__PURE__*/_react["default"].createElement(_select["default"], {
placeholder: (0, _localeContext.$l)('Table', 'please_select_column'),
className: "".concat(sortPrefixCls, "-list-item-sortName"),
record: record,
name: "sortName",
optionsFilter: optionsFilter,
notFoundContent: (0, _localeContext.$l)('Table', 'no_save_filter'),
clearButton: false
}), /*#__PURE__*/_react["default"].createElement(_selectBox["default"], {
record: record,
name: "order",
className: "".concat(sortPrefixCls, "-list-item-sortOrder")
}, /*#__PURE__*/_react["default"].createElement(Option, {
value: _enum.SortOrder.asc
}, (0, _localeContext.$l)('Table', 'ascending')), /*#__PURE__*/_react["default"].createElement(Option, {
value: _enum.SortOrder.desc
}, (0, _localeContext.$l)('Table', 'descending'))), /*#__PURE__*/_react["default"].createElement(_button["default"], {
className: "".concat(sortPrefixCls, "-list-item-delete"),
icon: 'delete_black-o',
funcType: _interface.FuncType.link,
color: _interface.ButtonColor.primary,
onClick: function onClick() {
return sortDS["delete"](record, false);
}
}));
});
};
var popupContent = (0, _react.useMemo)(function () {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(sortPrefixCls, "-content")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(sortPrefixCls, "-body")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(sortPrefixCls, "-list-container")
}, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
onDragEnd: onDragEnd
}, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
droppableId: "combine-sort",
direction: "vertical"
}, function (provided) {
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
ref: provided.innerRef
}, provided.droppableProps, {
className: "".concat(sortPrefixCls, "-list")
}), sortDS.data.map(function (record, index) {
var key = record.key;
return /*#__PURE__*/_react["default"].createElement(SortDragItem, {
key: key,
record: record,
index: index
});
}), provided.placeholder);
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(sortPrefixCls, "-add-button")
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
funcType: _interface.FuncType.link,
icon: "add",
onClick: function onClick() {
return sortDS.create();
},
color: _interface.ButtonColor.primary,
disabled: sortDS.data.length >= sortFieldOptions.records.length
}, (0, _localeContext.$l)('Table', 'add_sort')))), /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(sortPrefixCls, "-footer")
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
onClick: handleCancel
}, (0, _localeContext.$l)('Modal', 'cancel')), /*#__PURE__*/_react["default"].createElement(_button["default"], {
onClick: handleConfirm,
color: _interface.ButtonColor.primary
}, (0, _localeContext.$l)('Modal', 'ok'))));
}, [onDragEnd, sortFieldOptions, sortDS, sortDS.data]);
if (!combineSort || !sortableFieldNames || sortableFieldNames.length === 0) {
return null;
}
return /*#__PURE__*/_react["default"].createElement(_popover["default"], {
trigger: "click",
overlayClassName: "".concat(sortPrefixCls, "-popover"),
title: (0, _localeContext.$l)('Table', 'custom_sort'),
content: popupContent,
visible: visible,
onVisibleChange: onVisibleChange,
placement: "bottomLeft"
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
icon: "paixu-xia",
funcType: _interface.FuncType.link,
color: _interface.ButtonColor.primary,
className: "".concat(sortPrefixCls, "-trigger-button")
}));
};
CombineSort.displayName = 'CombineSort';
var _default = (0, _mobxReactLite.observer)(CombineSort);
exports["default"] = _default;
//# sourceMappingURL=CombineSort.js.map