@clayui/form
Version:
ClayForm component
164 lines (163 loc) • 6.79 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var DualListBox_exports = {};
__export(DualListBox_exports, {
default: () => DualListBox_default
});
module.exports = __toCommonJS(DualListBox_exports);
var import_button = require("@clayui/button");
var import_shared = require("@clayui/shared");
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_Form = __toESM(require("./Form"));
var import_SelectBox = __toESM(require("./SelectBox"));
function swapArrayItems(arrays, selectedIndexes) {
const [sourceArray, targetArray] = arrays;
const newTargetArray = [...targetArray];
const newSourceArray = sourceArray.filter((item, index) => {
if (selectedIndexes.includes(index)) {
newTargetArray.push(item);
return false;
}
return true;
});
return [newSourceArray, newTargetArray];
}
const defaultError = "The maximum number of items for {0} is {1}";
function DualListBox({
ariaLabels = {
error: defaultError,
transferLTR: "Transfer Item Left to Right",
transferRTL: "Transfer Item Right to Left"
},
className,
disabled,
disableLTR,
disableRTL,
items = [[], []],
left = {},
leftMaxItems,
onItemsChange,
right = {},
rightMaxItems,
size,
spritemap,
...otherProps
}) {
const [internalLeftSelected, setInternalLeftSelected] = import_react.default.useState(
left.selected || []
);
const [internalRightSelected, setInternalRightSelected] = import_react.default.useState(
right.selected || []
);
const handleLeftSelectedChange = left.onSelectChange || setInternalLeftSelected;
const handleRightSelectedChange = right.onSelectChange || setInternalRightSelected;
const leftSelected = left.selected || internalLeftSelected;
const rightSelected = right.selected || internalRightSelected;
const [leftItems, rightItems] = items;
const selectedIndexesLeft = (0, import_SelectBox.getSelectedIndexes)(leftItems, leftSelected);
const selectedIndexesRight = (0, import_SelectBox.getSelectedIndexes)(rightItems, rightSelected);
const isLeftError = leftMaxItems ? rightSelected.length + leftItems.length > leftMaxItems : false;
const isRightError = rightMaxItems ? leftSelected.length + rightItems.length > rightMaxItems : false;
const hasMaxItemsLeft = leftMaxItems ? leftItems.length >= leftMaxItems : false;
const hasMaxItemsRight = rightMaxItems ? rightItems.length >= rightMaxItems : false;
return /* @__PURE__ */ import_react.default.createElement("div", { ...otherProps, className: (0, import_classnames.default)(className, "form-group") }, /* @__PURE__ */ import_react.default.createElement("div", { className: "clay-dual-listbox" }, /* @__PURE__ */ import_react.default.createElement(
import_SelectBox.default,
{
className: "clay-dual-listbox-item clay-dual-listbox-item-expand listbox-left",
disabled,
id: left.id,
items: leftItems,
label: left.label,
multiple: true,
onItemsChange: (newLeftItems) => onItemsChange([newLeftItems, rightItems]),
onSelectChange: handleLeftSelectedChange,
size,
value: leftSelected
}
), /* @__PURE__ */ import_react.default.createElement("div", { className: "btn-group-vertical clay-dual-listbox-actions clay-dual-listbox-item" }, /* @__PURE__ */ import_react.default.createElement(
import_button.ClayButtonWithIcon,
{
"aria-label": ariaLabels.transferLTR,
className: "transfer-button-ltr",
"data-testid": "ltr",
disabled: disableLTR || hasMaxItemsRight || isRightError || disabled,
displayType: "secondary",
onClick: () => {
const [arrayLeft, arrayRight] = swapArrayItems(
[leftItems, rightItems],
selectedIndexesLeft
);
onItemsChange([arrayLeft, arrayRight]);
},
small: true,
spritemap,
symbol: "caret-right"
}
), /* @__PURE__ */ import_react.default.createElement(
import_button.ClayButtonWithIcon,
{
"aria-label": ariaLabels.transferRTL,
className: "transfer-button-rtl",
"data-testid": "rtl",
disabled: disableRTL || hasMaxItemsLeft || isLeftError || disabled,
displayType: "secondary",
onClick: () => {
const [arrayRight, arrayLeft] = swapArrayItems(
[rightItems, leftItems],
selectedIndexesRight
);
onItemsChange([arrayLeft, arrayRight]);
},
small: true,
spritemap,
symbol: "caret-left"
}
)), /* @__PURE__ */ import_react.default.createElement(
import_SelectBox.default,
{
className: "clay-dual-listbox-item clay-dual-listbox-item-expand listbox-right",
disabled,
id: right.id,
items: rightItems,
label: right.label,
multiple: true,
onItemsChange: (newRightItems) => onItemsChange([leftItems, newRightItems]),
onSelectChange: handleRightSelectedChange,
showArrows: true,
size,
spritemap,
value: rightSelected
}
)), (isLeftError || isRightError) && /* @__PURE__ */ import_react.default.createElement(import_Form.default.FeedbackGroup, { className: "has-error" }, /* @__PURE__ */ import_react.default.createElement(import_Form.default.FeedbackItem, null, (0, import_shared.sub)(ariaLabels.error || defaultError, [
isLeftError ? left.label : right.label,
isLeftError ? leftMaxItems : rightMaxItems
]))));
}
var DualListBox_default = DualListBox;