@clayui/form/lib/esm/DualListBox.js

ClayForm component

import { ClayButtonWithIcon } from "@clayui/button";
import { sub } from "@clayui/shared";
import classNames from "classnames";
import React from "react";
import Form from "./Form";
import ClaySelectBox, { getSelectedIndexes } from "./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] = React.useState(
    left.selected || []
  );
  const [internalRightSelected, setInternalRightSelected] = React.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 = getSelectedIndexes(leftItems, leftSelected);
  const selectedIndexesRight = 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__ */ React.createElement("div", { ...otherProps, className: classNames(className, "form-group") }, /* @__PURE__ */ React.createElement("div", { className: "clay-dual-listbox" }, /* @__PURE__ */ React.createElement(
    ClaySelectBox,
    {
      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__ */ React.createElement("div", { className: "btn-group-vertical clay-dual-listbox-actions clay-dual-listbox-item" }, /* @__PURE__ */ React.createElement(
    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__ */ React.createElement(
    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__ */ React.createElement(
    ClaySelectBox,
    {
      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__ */ React.createElement(Form.FeedbackGroup, { className: "has-error" }, /* @__PURE__ */ React.createElement(Form.FeedbackItem, null, sub(ariaLabels.error || defaultError, [
    isLeftError ? left.label : right.label,
    isLeftError ? leftMaxItems : rightMaxItems
  ]))));
}
var DualListBox_default = DualListBox;
export {
  DualListBox_default as default
};