react-kanban-kit/dist/components/Column/Column.es.js

A flexible and customizable Kanban board component for React applications, built with TypeScript and modern drag-and-drop functionality powered by Atlassian's pragmatic-drag-and-drop.

import { memo, useMemo } from "react";
import { createPortal } from "react-dom";
import { withPrefix } from "../../utils/getPrefix.es.js";
import classNames from "../../node_modules/classnames/index.es.js";
import ColumnHeader from "../ColumnHeader/ColumnHeader.es.js";
import ColumnContent from "../ColumnContent/ColumnContent.es.js";
import { useColumnDnd } from "../../global/dnd/useColumnDnd.es.js";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
const ColumnDropIndicator = memo(({
  width,
  height,
  customIndicator
}) => /* @__PURE__ */ jsx("div", {
  className: withPrefix("column-shadow-container"),
  children: customIndicator || /* @__PURE__ */ jsx("div", {
    className: withPrefix("column-shadow"),
    style: {
      width,
      height
    }
  })
}));
const Column = (props) => {
  const {
    index,
    data,
    items,
    onColumnClick,
    renderColumnHeader,
    renderColumnWrapper,
    renderColumnFooter,
    columnWrapperStyle,
    columnHeaderStyle,
    onColumnDndStateChange,
    columnWrapperClassName,
    columnHeaderClassName,
    columnListContentClassName,
    columnClassName,
    columnStyle,
    renderColumnDragPreview,
    renderColumnDragIndicator,
    allowColumnDrag,
    ...rest
  } = props;
  const {
    headerRef,
    outerFullHeightRef,
    innerRef,
    state,
    cardOverShadowCount
  } = useColumnDnd(data, index, items, onColumnDndStateChange, allowColumnDrag, !!renderColumnDragPreview);
  const isDragging = state.type === "is-dragging" || state.type === "preview";
  const isHidden = state.type === "is-dragging-and-left-self";
  const isColumnOver = state.type === "is-column-over";
  const closestEdge = isColumnOver ? state.closestEdge : null;
  const columnIndicator = useMemo(() => {
    if (!isColumnOver)
      return null;
    const {
      width,
      height
    } = state.rect;
    const edge = state.closestEdge === "left" ? "left" : "right";
    const custom = renderColumnDragIndicator == null ? void 0 : renderColumnDragIndicator(data, {
      width,
      height,
      edge
    });
    return /* @__PURE__ */ jsx(ColumnDropIndicator, {
      width,
      height,
      customIndicator: custom
    });
  }, [isColumnOver, state, renderColumnDragIndicator, data]);
  const previewContent = useMemo(() => {
    if (state.type !== "preview" || !renderColumnDragPreview)
      return null;
    return renderColumnDragPreview(data, {
      state,
      data,
      index,
      isDraggable: data.isDraggable !== false
    });
  }, [state, data, index, renderColumnDragPreview]);
  const containerClassName = classNames(withPrefix("column-outer"), columnWrapperClassName == null ? void 0 : columnWrapperClassName(data));
  const columnWrapperContent = (children) => renderColumnWrapper ? renderColumnWrapper(data, {
    children,
    className: containerClassName,
    style: columnWrapperStyle == null ? void 0 : columnWrapperStyle(data),
    ref: outerFullHeightRef
  }) : /* @__PURE__ */ jsx("div", {
    className: containerClassName,
    ref: outerFullHeightRef,
    style: columnWrapperStyle == null ? void 0 : columnWrapperStyle(data),
    children
  });
  const dragStyle = isHidden ? {
    display: "none"
  } : isDragging ? {
    opacity: 0.4
  } : void 0;
  return /* @__PURE__ */ jsxs(Fragment, {
    children: [closestEdge === "left" && columnIndicator, /* @__PURE__ */ jsxs("div", {
      onClick: (e) => onColumnClick == null ? void 0 : onColumnClick(e, data),
      style: dragStyle,
      children: [columnWrapperContent(/* @__PURE__ */ jsx("div", {
        className: classNames(withPrefix("column"), columnClassName == null ? void 0 : columnClassName(data)),
        ref: innerRef,
        style: columnStyle == null ? void 0 : columnStyle(data),
        children: /* @__PURE__ */ jsxs("div", {
          className: withPrefix("column-wrapper"),
          children: [/* @__PURE__ */ jsx(ColumnHeader, {
            renderColumnHeader,
            columnHeaderStyle,
            columnHeaderClassName: columnHeaderClassName == null ? void 0 : columnHeaderClassName(data),
            data,
            ref: headerRef
          }), /* @__PURE__ */ jsx(ColumnContent, {
            items,
            column: data,
            columnListContentClassName: columnListContentClassName == null ? void 0 : columnListContentClassName(data),
            cardOverHeight: cardOverShadowCount ? state.dragging.height : null,
            cardOverShadowCount,
            ...rest
          }), renderColumnFooter == null ? void 0 : renderColumnFooter(data)]
        })
      })), state.type === "preview" && previewContent && createPortal(previewContent, state.container)]
    }), closestEdge === "right" && columnIndicator]
  });
};
export {
  Column as default
};
//# sourceMappingURL=Column.es.js.map