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

ClayForm component

import ClayButton, { ClayButtonWithIcon } from "@clayui/button";
import { Keys } from "@clayui/shared";
import classNames from "classnames";
import React from "react";
function arrayMove(arrayToMove, oldIndex, newIndex) {
  arrayToMove.splice(newIndex, 0, arrayToMove.splice(oldIndex, 1)[0]);
  return arrayToMove;
}
function reorderUp(array, selectedIndexes) {
  let clonedArray = [...array];
  for (let i = 0; i < selectedIndexes.length; i++) {
    const item = selectedIndexes[i];
    if (item === 0) {
      return clonedArray;
    }
    clonedArray = arrayMove(clonedArray, item, item - 1);
  }
  return clonedArray;
}
function reorderDown(array, selectedIndexes) {
  let clonedArray = [...array];
  for (let i = 0; i < selectedIndexes.length; i++) {
    const item = selectedIndexes[i];
    if (selectedIndexes.includes(clonedArray.length - 1)) {
      return clonedArray;
    }
    clonedArray = arrayMove(clonedArray, item, item + 1);
  }
  return clonedArray;
}
function getSelectedIndexes(items, selectedValues) {
  return items.reduce((acc, item, index) => {
    if (selectedValues.includes(item.value)) {
      return [...acc, index];
    }
    return acc;
  }, []);
}
function SelectBox({
  ariaLabels = {
    reorderDown: "Reorder Down",
    reorderUp: "Reorder Up"
  },
  buttonAlignment = "end",
  className,
  disabled,
  id,
  items,
  label,
  multiple,
  onItemsChange,
  onSelectChange,
  showArrows,
  size,
  spritemap,
  value,
  ...otherProps
}) {
  const selectedIndexes = getSelectedIndexes(
    items,
    Array.isArray(value) ? value : [value]
  );
  const noItems = !items.length;
  const noItemsSelected = !selectedIndexes.length;
  const firstItemSelected = selectedIndexes.includes(0);
  const lastItemSelected = selectedIndexes.includes(items.length - 1);
  return /* @__PURE__ */ React.createElement("div", { className: classNames(className, "form-group") }, label && /* @__PURE__ */ React.createElement(
    "label",
    {
      className: classNames("reorder-label", {
        disabled
      }),
      htmlFor: id
    },
    label
  ), /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames("clay-reorder", {
        [`clay-reorder-footer-${buttonAlignment}`]: buttonAlignment
      })
    },
    /* @__PURE__ */ React.createElement(
      "select",
      {
        ...otherProps,
        className: "form-control form-control-inset",
        disabled,
        id,
        multiple,
        onChange: (event) => {
          const selectedItems = [...event.target.options].filter(({ selected }) => selected).map((item) => item.value);
          onSelectChange(selectedItems);
        },
        onKeyDown: (event) => selectedIndexes.forEach((index) => {
          if (event.key === Keys.Down && index === items.length - 1 || event.key === Keys.Up && index === 0) {
            event.preventDefault();
          }
        }),
        size,
        value
      },
      items.map((option) => /* @__PURE__ */ React.createElement(
        "option",
        {
          className: "reorder-option",
          key: option.value,
          value: option.value
        },
        option.label
      ))
    ),
    /* @__PURE__ */ React.createElement("div", { className: "clay-reorder-underlay form-control" }),
    showArrows && onItemsChange && /* @__PURE__ */ React.createElement("div", { className: "clay-reorder-footer" }, /* @__PURE__ */ React.createElement(ClayButton.Group, { className: "reorder-order-buttons" }, /* @__PURE__ */ React.createElement(
      ClayButtonWithIcon,
      {
        "aria-label": ariaLabels.reorderUp,
        className: "reorder-button reorder-button-up",
        disabled: firstItemSelected || noItemsSelected || noItems,
        displayType: "secondary",
        onClick: () => onItemsChange(
          reorderUp(items, selectedIndexes)
        ),
        small: true,
        spritemap,
        symbol: "caret-top"
      }
    ), /* @__PURE__ */ React.createElement(
      ClayButtonWithIcon,
      {
        "aria-label": ariaLabels.reorderDown,
        className: "reorder-button reorder-button-down",
        disabled: lastItemSelected || noItemsSelected || noItems,
        displayType: "secondary",
        onClick: () => onItemsChange(
          reorderDown(items, selectedIndexes)
        ),
        small: true,
        spritemap,
        symbol: "caret-bottom"
      }
    )))
  ));
}
var SelectBox_default = SelectBox;
export {
  SelectBox_default as default,
  getSelectedIndexes
};