1002 lines
33 KiB
JavaScript
1002 lines
33 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { classNames, ObjectUtils, DomHandler } from 'primereact/utils';
|
|
import { Ripple } from 'primereact/ripple';
|
|
import { Button } from 'primereact/button';
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
}
|
|
|
|
function _defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) {
|
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
Object.defineProperty(Constructor, "prototype", {
|
|
writable: false
|
|
});
|
|
return Constructor;
|
|
}
|
|
|
|
function _assertThisInitialized(self) {
|
|
if (self === void 0) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}
|
|
|
|
return self;
|
|
}
|
|
|
|
function _setPrototypeOf(o, p) {
|
|
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
|
o.__proto__ = p;
|
|
return o;
|
|
};
|
|
|
|
return _setPrototypeOf(o, p);
|
|
}
|
|
|
|
function _inherits(subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function");
|
|
}
|
|
|
|
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
|
constructor: {
|
|
value: subClass,
|
|
writable: true,
|
|
configurable: true
|
|
}
|
|
});
|
|
Object.defineProperty(subClass, "prototype", {
|
|
writable: false
|
|
});
|
|
if (superClass) _setPrototypeOf(subClass, superClass);
|
|
}
|
|
|
|
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 _possibleConstructorReturn(self, call) {
|
|
if (call && (_typeof(call) === "object" || typeof call === "function")) {
|
|
return call;
|
|
} else if (call !== void 0) {
|
|
throw new TypeError("Derived constructors may only return object or undefined");
|
|
}
|
|
|
|
return _assertThisInitialized(self);
|
|
}
|
|
|
|
function _getPrototypeOf(o) {
|
|
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
|
return o.__proto__ || Object.getPrototypeOf(o);
|
|
};
|
|
return _getPrototypeOf(o);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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 _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 _arrayWithoutHoles(arr) {
|
|
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
}
|
|
|
|
function _iterableToArray(iter) {
|
|
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
}
|
|
|
|
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 _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 _toConsumableArray(arr) {
|
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
}
|
|
|
|
function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PickListItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickListItem, _Component);
|
|
|
|
var _super = _createSuper$4(PickListItem);
|
|
|
|
function PickListItem(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickListItem);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickListItem, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
value: this.props.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (this.props.onKeyDown) {
|
|
this.props.onKeyDown({
|
|
originalEvent: event,
|
|
value: this.props.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.props.template ? this.props.template(this.props.value) : this.props.value;
|
|
var className = classNames('p-picklist-item', {
|
|
'p-highlight': this.props.selected
|
|
}, this.props.className);
|
|
return /*#__PURE__*/React.createElement("li", {
|
|
className: className,
|
|
onClick: this.onClick,
|
|
onKeyDown: this.onKeyDown,
|
|
tabIndex: this.props.tabIndex,
|
|
role: "option",
|
|
"aria-selected": this.props.selected
|
|
}, content, /*#__PURE__*/React.createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return PickListItem;
|
|
}(Component);
|
|
|
|
_defineProperty(PickListItem, "defaultProps", {
|
|
value: null,
|
|
className: null,
|
|
template: null,
|
|
selected: false,
|
|
tabIndex: null,
|
|
onClick: null,
|
|
onKeyDown: null
|
|
});
|
|
|
|
function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var PickListSubListComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickListSubListComponent, _Component);
|
|
|
|
var _super = _createSuper$3(PickListSubListComponent);
|
|
|
|
function PickListSubListComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickListSubListComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onItemClick = _this.onItemClick.bind(_assertThisInitialized(_this));
|
|
_this.onItemKeyDown = _this.onItemKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickListSubListComponent, [{
|
|
key: "onItemClick",
|
|
value: function onItemClick(event) {
|
|
var originalEvent = event.originalEvent;
|
|
var item = event.value;
|
|
|
|
var selection = _toConsumableArray(this.props.selection);
|
|
|
|
var index = ObjectUtils.findIndexInList(item, selection, this.props.dataKey);
|
|
var selected = index !== -1;
|
|
var metaSelection = this.props.metaKeySelection;
|
|
|
|
if (metaSelection) {
|
|
var metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
|
|
|
|
if (selected && metaKey) {
|
|
selection.splice(index, 1);
|
|
} else {
|
|
if (!metaKey) {
|
|
selection.length = 0;
|
|
}
|
|
|
|
selection.push(item);
|
|
}
|
|
} else {
|
|
if (selected) selection.splice(index, 1);else selection.push(item);
|
|
}
|
|
|
|
if (this.props.onSelectionChange) {
|
|
this.props.onSelectionChange({
|
|
event: originalEvent,
|
|
value: selection
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemKeyDown",
|
|
value: function onItemKeyDown(event) {
|
|
var listItem = event.originalEvent.currentTarget;
|
|
|
|
switch (event.originalEvent.which) {
|
|
//down
|
|
case 40:
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.focus();
|
|
}
|
|
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.focus();
|
|
}
|
|
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
this.onItemClick(event);
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(item) {
|
|
return ObjectUtils.findIndexInList(item, this.props.selection, this.props.dataKey) !== -1;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var header = null;
|
|
var items = null;
|
|
var wrapperClassName = classNames('p-picklist-list-wrapper', this.props.className);
|
|
var listClassName = classNames('p-picklist-list', this.props.listClassName);
|
|
|
|
if (this.props.header) {
|
|
header = /*#__PURE__*/React.createElement("div", {
|
|
className: "p-picklist-header"
|
|
}, ObjectUtils.getJSXElement(this.props.header, this.props));
|
|
}
|
|
|
|
if (this.props.list) {
|
|
items = this.props.list.map(function (item, i) {
|
|
return /*#__PURE__*/React.createElement(PickListItem, {
|
|
key: JSON.stringify(item),
|
|
value: item,
|
|
template: _this2.props.itemTemplate,
|
|
selected: _this2.isSelected(item),
|
|
onClick: _this2.onItemClick,
|
|
onKeyDown: _this2.onItemKeyDown,
|
|
tabIndex: _this2.props.tabIndex
|
|
});
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: wrapperClassName
|
|
}, header, /*#__PURE__*/React.createElement("ul", {
|
|
className: listClassName,
|
|
style: this.props.style,
|
|
role: "listbox",
|
|
"aria-multiselectable": true
|
|
}, items));
|
|
}
|
|
}]);
|
|
|
|
return PickListSubListComponent;
|
|
}(Component);
|
|
|
|
var PickListSubList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React.createElement(PickListSubListComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PickListControls = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickListControls, _Component);
|
|
|
|
var _super = _createSuper$2(PickListControls);
|
|
|
|
function PickListControls(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickListControls);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.moveUp = _this.moveUp.bind(_assertThisInitialized(_this));
|
|
_this.moveTop = _this.moveTop.bind(_assertThisInitialized(_this));
|
|
_this.moveDown = _this.moveDown.bind(_assertThisInitialized(_this));
|
|
_this.moveBottom = _this.moveBottom.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickListControls, [{
|
|
key: "moveUp",
|
|
value: function moveUp(event) {
|
|
var selectedItems = this.props.selection;
|
|
|
|
if (selectedItems && selectedItems.length) {
|
|
var list = _toConsumableArray(this.props.list);
|
|
|
|
for (var i = 0; i < selectedItems.length; i++) {
|
|
var selectedItem = selectedItems[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== 0) {
|
|
var movedItem = list[selectedItemIndex];
|
|
var temp = list[selectedItemIndex - 1];
|
|
list[selectedItemIndex - 1] = movedItem;
|
|
list[selectedItemIndex] = temp;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: list,
|
|
direction: 'up'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveTop",
|
|
value: function moveTop(event) {
|
|
var selectedItems = this.props.selection;
|
|
|
|
if (selectedItems && selectedItems.length) {
|
|
var list = _toConsumableArray(this.props.list);
|
|
|
|
for (var i = 0; i < selectedItems.length; i++) {
|
|
var selectedItem = selectedItems[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== 0) {
|
|
var movedItem = list.splice(selectedItemIndex, 1)[0];
|
|
list.unshift(movedItem);
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: list,
|
|
direction: 'top'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveDown",
|
|
value: function moveDown(event) {
|
|
var selectedItems = this.props.selection;
|
|
|
|
if (selectedItems && selectedItems.length) {
|
|
var list = _toConsumableArray(this.props.list);
|
|
|
|
for (var i = selectedItems.length - 1; i >= 0; i--) {
|
|
var selectedItem = selectedItems[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== list.length - 1) {
|
|
var movedItem = list[selectedItemIndex];
|
|
var temp = list[selectedItemIndex + 1];
|
|
list[selectedItemIndex + 1] = movedItem;
|
|
list[selectedItemIndex] = temp;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: list,
|
|
direction: 'down'
|
|
});
|
|
}
|
|
|
|
this.movedDown = true;
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveBottom",
|
|
value: function moveBottom(event) {
|
|
var selectedItems = this.props.selection;
|
|
|
|
if (selectedItems && selectedItems.length) {
|
|
var list = _toConsumableArray(this.props.list);
|
|
|
|
for (var i = selectedItems.length - 1; i >= 0; i--) {
|
|
var selectedItem = selectedItems[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== list.length - 1) {
|
|
var movedItem = list.splice(selectedItemIndex, 1)[0];
|
|
list.push(movedItem);
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: list,
|
|
direction: 'bottom'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var moveDisabled = !this.props.selection.length;
|
|
var className = classNames('p-picklist-buttons', this.props.className);
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: className
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
disabled: moveDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-up",
|
|
onClick: this.moveUp
|
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
disabled: moveDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-double-up",
|
|
onClick: this.moveTop
|
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
disabled: moveDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-down",
|
|
onClick: this.moveDown
|
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
disabled: moveDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-double-down",
|
|
onClick: this.moveBottom
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return PickListControls;
|
|
}(Component);
|
|
|
|
function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PickListTransferControls = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickListTransferControls, _Component);
|
|
|
|
var _super = _createSuper$1(PickListTransferControls);
|
|
|
|
function PickListTransferControls(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickListTransferControls);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.moveRight = _this.moveRight.bind(_assertThisInitialized(_this));
|
|
_this.moveAllRight = _this.moveAllRight.bind(_assertThisInitialized(_this));
|
|
_this.moveLeft = _this.moveLeft.bind(_assertThisInitialized(_this));
|
|
_this.moveAllLeft = _this.moveAllLeft.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickListTransferControls, [{
|
|
key: "moveRight",
|
|
value: function moveRight(event) {
|
|
var selection = this.props.sourceSelection;
|
|
|
|
if (ObjectUtils.isNotEmpty(selection)) {
|
|
var targetList = _toConsumableArray(this.props.target);
|
|
|
|
var sourceList = _toConsumableArray(this.props.source);
|
|
|
|
for (var i = 0; i < selection.length; i++) {
|
|
var selectedItem = selection[i];
|
|
|
|
if (ObjectUtils.findIndexInList(selectedItem, targetList, this.props.dataKey) === -1) {
|
|
targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList, this.props.dataKey), 1)[0]);
|
|
}
|
|
}
|
|
|
|
if (this.props.onTransfer) {
|
|
this.props.onTransfer({
|
|
originalEvent: event,
|
|
source: sourceList,
|
|
target: targetList,
|
|
direction: 'toTarget'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveAllRight",
|
|
value: function moveAllRight(event) {
|
|
if (this.props.source) {
|
|
var targetList = [].concat(_toConsumableArray(this.props.target), _toConsumableArray(this.props.source));
|
|
var sourceList = [];
|
|
|
|
if (this.props.onTransfer) {
|
|
this.props.onTransfer({
|
|
originalEvent: event,
|
|
source: sourceList,
|
|
target: targetList,
|
|
direction: 'allToTarget'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveLeft",
|
|
value: function moveLeft(event) {
|
|
var selection = this.props.targetSelection;
|
|
|
|
if (ObjectUtils.isNotEmpty(selection)) {
|
|
var targetList = _toConsumableArray(this.props.target);
|
|
|
|
var sourceList = _toConsumableArray(this.props.source);
|
|
|
|
for (var i = 0; i < selection.length; i++) {
|
|
var selectedItem = selection[i];
|
|
|
|
if (ObjectUtils.findIndexInList(selectedItem, sourceList, this.props.dataKey) === -1) {
|
|
sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList, this.props.dataKey), 1)[0]);
|
|
}
|
|
}
|
|
|
|
if (this.props.onTransfer) {
|
|
this.props.onTransfer({
|
|
originalEvent: event,
|
|
source: sourceList,
|
|
target: targetList,
|
|
direction: 'toSource'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveAllLeft",
|
|
value: function moveAllLeft(event) {
|
|
if (this.props.source) {
|
|
var sourceList = [].concat(_toConsumableArray(this.props.source), _toConsumableArray(this.props.target));
|
|
var targetList = [];
|
|
|
|
if (this.props.onTransfer) {
|
|
this.props.onTransfer({
|
|
originalEvent: event,
|
|
source: sourceList,
|
|
target: targetList,
|
|
direction: 'allToSource'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var moveRightDisabled = ObjectUtils.isEmpty(this.props.sourceSelection);
|
|
var moveLeftDisabled = ObjectUtils.isEmpty(this.props.targetSelection);
|
|
var moveAllRightDisabled = ObjectUtils.isEmpty(this.props.source);
|
|
var moveAllLeftDisabled = ObjectUtils.isEmpty(this.props.target);
|
|
var className = classNames('p-picklist-buttons p-picklist-transfer-buttons', this.props.className);
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: className
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
disabled: moveRightDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-right",
|
|
onClick: this.moveRight
|
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
disabled: moveAllRightDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-double-right",
|
|
onClick: this.moveAllRight
|
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
disabled: moveLeftDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-left",
|
|
onClick: this.moveLeft
|
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
disabled: moveAllLeftDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-double-left",
|
|
onClick: this.moveAllLeft
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return PickListTransferControls;
|
|
}(Component);
|
|
|
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PickList = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickList, _Component);
|
|
|
|
var _super = _createSuper(PickList);
|
|
|
|
function PickList(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickList);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {};
|
|
|
|
if (!_this.props.onSourceSelectionChange) {
|
|
_this.state.sourceSelection = [];
|
|
}
|
|
|
|
if (!_this.props.onTargetSelectionChange) {
|
|
_this.state.targetSelection = [];
|
|
}
|
|
|
|
_this.onSourceReorder = _this.onSourceReorder.bind(_assertThisInitialized(_this));
|
|
_this.onTargetReorder = _this.onTargetReorder.bind(_assertThisInitialized(_this));
|
|
_this.onTransfer = _this.onTransfer.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickList, [{
|
|
key: "getSourceSelection",
|
|
value: function getSourceSelection() {
|
|
return this.props.onSourceSelectionChange ? this.props.sourceSelection : this.state.sourceSelection;
|
|
}
|
|
}, {
|
|
key: "getTargetSelection",
|
|
value: function getTargetSelection() {
|
|
return this.props.onTargetSelectionChange ? this.props.targetSelection : this.state.targetSelection;
|
|
}
|
|
}, {
|
|
key: "onSourceReorder",
|
|
value: function onSourceReorder(event) {
|
|
this.handleChange(event, event.value, this.props.target);
|
|
this.reorderedListElement = this.sourceListElement;
|
|
this.reorderDirection = event.direction;
|
|
}
|
|
}, {
|
|
key: "onTargetReorder",
|
|
value: function onTargetReorder(event) {
|
|
this.handleChange(event, this.props.source, event.value);
|
|
this.reorderedListElement = this.targetListElement;
|
|
this.reorderDirection = event.direction;
|
|
}
|
|
}, {
|
|
key: "handleScrollPosition",
|
|
value: function handleScrollPosition(listElement, direction) {
|
|
if (listElement) {
|
|
var listContainer = DomHandler.findSingle(listElement, '.p-picklist-list');
|
|
|
|
switch (direction) {
|
|
case 'up':
|
|
this.scrollInView(listContainer, -1);
|
|
break;
|
|
|
|
case 'top':
|
|
listContainer.scrollTop = 0;
|
|
break;
|
|
|
|
case 'down':
|
|
this.scrollInView(listContainer, 1);
|
|
break;
|
|
|
|
case 'bottom':
|
|
listContainer.scrollTop = listContainer.scrollHeight;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "handleChange",
|
|
value: function handleChange(event, source, target) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event.originalEvent,
|
|
source: source,
|
|
target: target
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTransfer",
|
|
value: function onTransfer(event) {
|
|
var originalEvent = event.originalEvent,
|
|
source = event.source,
|
|
target = event.target,
|
|
direction = event.direction;
|
|
|
|
switch (direction) {
|
|
case 'toTarget':
|
|
if (this.props.onMoveToTarget) {
|
|
this.props.onMoveToTarget({
|
|
originalEvent: originalEvent,
|
|
value: this.getSourceSelection()
|
|
});
|
|
}
|
|
|
|
break;
|
|
|
|
case 'allToTarget':
|
|
if (this.props.onMoveAllToTarget) {
|
|
this.props.onMoveAllToTarget({
|
|
originalEvent: originalEvent,
|
|
value: this.props.source
|
|
});
|
|
}
|
|
|
|
break;
|
|
|
|
case 'toSource':
|
|
if (this.props.onMoveToSource) {
|
|
this.props.onMoveToSource({
|
|
originalEvent: originalEvent,
|
|
value: this.getTargetSelection()
|
|
});
|
|
}
|
|
|
|
break;
|
|
|
|
case 'allToSource':
|
|
if (this.props.onMoveAllToSource) {
|
|
this.props.onMoveAllToSource({
|
|
originalEvent: originalEvent,
|
|
value: this.props.target
|
|
});
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
this.onSelectionChange({
|
|
originalEvent: originalEvent,
|
|
value: []
|
|
}, 'sourceSelection', this.props.onSourceSelectionChange);
|
|
this.onSelectionChange({
|
|
originalEvent: originalEvent,
|
|
value: []
|
|
}, 'targetSelection', this.props.onTargetSelectionChange);
|
|
this.handleChange(event, source, target);
|
|
}
|
|
}, {
|
|
key: "scrollInView",
|
|
value: function scrollInView(listContainer) {
|
|
var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
|
var selectedItems = listContainer.getElementsByClassName('p-highlight');
|
|
|
|
if (ObjectUtils.isNotEmpty(selectedItems)) {
|
|
DomHandler.scrollInView(listContainer, direction === -1 ? selectedItems[0] : selectedItems[selectedItems.length - 1]);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSelectionChange",
|
|
value: function onSelectionChange(e, stateKey, callback) {
|
|
if (callback) {
|
|
callback(e);
|
|
} else {
|
|
this.setState(_defineProperty({}, stateKey, e.value));
|
|
}
|
|
|
|
if (ObjectUtils.isNotEmpty(this.state.sourceSelection) && stateKey === 'targetSelection') {
|
|
this.setState({
|
|
sourceSelection: []
|
|
});
|
|
} else if (ObjectUtils.isNotEmpty(this.state.targetSelection) && stateKey === 'sourceSelection') {
|
|
this.setState({
|
|
targetSelection: []
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
if (this.reorderedListElement) {
|
|
this.handleScrollPosition(this.reorderedListElement, this.reorderDirection);
|
|
this.reorderedListElement = null;
|
|
this.reorderDirection = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-picklist p-component', this.props.className);
|
|
var sourceSelection = this.getSourceSelection();
|
|
var targetSelection = this.getTargetSelection();
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, this.props.showSourceControls && /*#__PURE__*/React.createElement(PickListControls, {
|
|
list: this.props.source,
|
|
selection: sourceSelection,
|
|
onReorder: this.onSourceReorder,
|
|
className: "p-picklist-source-controls",
|
|
dataKey: this.props.dataKey
|
|
}), /*#__PURE__*/React.createElement(PickListSubList, {
|
|
ref: function ref(el) {
|
|
return _this2.sourceListElement = el;
|
|
},
|
|
list: this.props.source,
|
|
selection: sourceSelection,
|
|
onSelectionChange: function onSelectionChange(e) {
|
|
return _this2.onSelectionChange(e, 'sourceSelection', _this2.props.onSourceSelectionChange);
|
|
},
|
|
itemTemplate: this.props.itemTemplate,
|
|
header: this.props.sourceHeader,
|
|
style: this.props.sourceStyle,
|
|
className: "p-picklist-source-wrapper",
|
|
listClassName: "p-picklist-source",
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
tabIndex: this.props.tabIndex,
|
|
dataKey: this.props.dataKey
|
|
}), /*#__PURE__*/React.createElement(PickListTransferControls, {
|
|
onTransfer: this.onTransfer,
|
|
source: this.props.source,
|
|
target: this.props.target,
|
|
sourceSelection: sourceSelection,
|
|
targetSelection: targetSelection,
|
|
dataKey: this.props.dataKey
|
|
}), /*#__PURE__*/React.createElement(PickListSubList, {
|
|
ref: function ref(el) {
|
|
return _this2.targetListElement = el;
|
|
},
|
|
list: this.props.target,
|
|
selection: targetSelection,
|
|
onSelectionChange: function onSelectionChange(e) {
|
|
return _this2.onSelectionChange(e, 'targetSelection', _this2.props.onTargetSelectionChange);
|
|
},
|
|
itemTemplate: this.props.itemTemplate,
|
|
header: this.props.targetHeader,
|
|
style: this.props.targetStyle,
|
|
className: "p-picklist-target-wrapper",
|
|
listClassName: "p-picklist-target",
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
tabIndex: this.props.tabIndex,
|
|
dataKey: this.props.dataKey
|
|
}), this.props.showTargetControls && /*#__PURE__*/React.createElement(PickListControls, {
|
|
list: this.props.target,
|
|
selection: targetSelection,
|
|
onReorder: this.onTargetReorder,
|
|
className: "p-picklist-target-controls",
|
|
dataKey: this.props.dataKey
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return PickList;
|
|
}(Component);
|
|
|
|
_defineProperty(PickList, "defaultProps", {
|
|
id: null,
|
|
source: null,
|
|
target: null,
|
|
sourceHeader: null,
|
|
targetHeader: null,
|
|
style: null,
|
|
className: null,
|
|
sourceStyle: null,
|
|
targetStyle: null,
|
|
sourceSelection: null,
|
|
targetSelection: null,
|
|
showSourceControls: true,
|
|
showTargetControls: true,
|
|
metaKeySelection: true,
|
|
tabIndex: 0,
|
|
dataKey: null,
|
|
itemTemplate: null,
|
|
onChange: null,
|
|
onMoveToSource: null,
|
|
onMoveAllToSource: null,
|
|
onMoveToTarget: null,
|
|
onMoveAllToTarget: null,
|
|
onSourceSelectionChange: null,
|
|
onTargetSelectionChange: null
|
|
});
|
|
|
|
export { PickList };
|