@flatbiz/antd/dist/drag-collapse-wL7wIgVO.js

/*! @flatjs/forge MIT @flatbiz/antd */

import { classNames } from '@dimjs/utils/class-names/class-names';
import { b as _objectSpread2, a as _slicedToArray, c as _toConsumableArray } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { arrayRemove } from '@dimjs/utils/array/array-remove';
import { hooks } from '@wove/react/hooks';
import { Fragment, useState } from 'react';
import { DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
import { useSortable, SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { toArray } from '@flatbiz/utils';
import { fbaHooks } from './fba-hooks/index.js';
import _DragOutlined from '@ant-design/icons/es/icons/DragOutlined.js';
import { Collapse } from 'antd';
import { CSS } from '@dnd-kit/utilities';
import { jsx, jsxs } from 'react/jsx-runtime';

function SortableItem(props) {
  var _props$onChange;
  var _useSortable = useSortable({
      id: props.item.key
    }),
    listeners = _useSortable.listeners,
    setNodeRef = _useSortable.setNodeRef,
    transform = _useSortable.transform,
    transition = _useSortable.transition;
  var header = function header(item) {
    var dragIcon = props.dragIcon ? props.dragIcon : /*#__PURE__*/jsx(_DragOutlined, {});
    return props.hideDragIcon ? item.content : /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({
        className: "dc-drag-trigger"
      }, listeners), {}, {
        children: dragIcon
      })), /*#__PURE__*/jsx("span", {
        className: "dc-drag-header-content",
        children: item.content
      })]
    });
  };
  var style = _objectSpread2({
    transform: CSS.Transform.toString(transform),
    transition: transition
  }, props.style);
  var isActive = props.openKeys.includes(props.item.key);
  var cname = classNames('drag-collapse', {
    'drag-collapse-grap': props.isGray,
    'drag-collapse-last': props.isLast
  }, props.className);
  return /*#__PURE__*/jsx(Collapse, {
    activeKey: isActive ? props.item.key : undefined,
    accordion: true,
    className: cname,
    collapsible: props.collapsible,
    expandIcon: props.expandIcon,
    expandIconPosition: props.expandIconPosition,
    size: props.size,
    onChange: (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.bind(null, props.item.key),
    style: _objectSpread2({}, style),
    ref: setNodeRef,
    items: [{
      key: props.item.key,
      label: header(props.item),
      children: props.item.content
    }]
  });
}

var DragCollapse = function DragCollapse(props) {
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    dragActiveId = _useState2[0],
    setDragActiveId = _useState2[1];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    openKeys = _useState4[0],
    setOpenKeys = _useState4[1];
  fbaHooks.useEffectCustom(function () {
    var defaultActiveKeys = toArray(props.defaultActiveKey);
    if (!props.activeKey && defaultActiveKeys.length > 0) {
      setOpenKeys(defaultActiveKeys);
    } else {
      setOpenKeys(toArray(props.activeKey));
    }
  }, []);
  hooks.useUpdateEffect(function () {
    setOpenKeys(toArray(props.activeKey));
  }, [props.activeKey]);
  var onChange = hooks.useCallbackRef(function (key) {
    var openKeysNew = [];
    if (props.accordion) {
      if (openKeys[0] && openKeys[0] === key) {
        openKeysNew = [];
      } else {
        openKeysNew = [key];
      }
    } else {
      var has = openKeys.includes(key);
      if (has) {
        arrayRemove(openKeys, key);
        openKeysNew = _toConsumableArray(openKeys);
      } else {
        openKeysNew = openKeys.concat(key);
      }
    }
    setOpenKeys(openKeysNew);
    if (props.accordion) {
      var _props$onChange;
      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, openKeysNew.length ? openKeysNew[0] : undefined);
    } else {
      var _props$onChange2;
      (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, openKeysNew.length ? openKeysNew : undefined);
    }
  });
  function handleDragStart(event) {
    var active = event.active;
    setDragActiveId(active.id);
  }
  function handleDragEnd(event) {
    var active = event.active,
      over = event.over;
    if (active.id !== over.id) {
      var oldIndex = props.items.findIndex(function (item) {
        return item.key === active.id;
      });
      var newIndex = props.items.findIndex(function (item) {
        return item.key === over.id;
      });
      var newList = arrayMove(props.items, oldIndex, newIndex);
      props.onDropChange(newList);
    }
    setDragActiveId(undefined);
  }
  return /*#__PURE__*/jsx("div", {
    className: classNames('drag-collapse-wrapper', props.className),
    style: props.style,
    children: /*#__PURE__*/jsxs(DndContext, {
      collisionDetection: closestCenter,
      onDragStart: handleDragStart,
      onDragEnd: handleDragEnd,
      children: [/*#__PURE__*/jsx(SortableContext, {
        items: props.items.map(function (item) {
          return item.key;
        }),
        strategy: verticalListSortingStrategy,
        children: props.items.map(function (item, index) {
          return /*#__PURE__*/jsx(SortableItem, {
            item: item,
            openKeys: openKeys,
            collapsible: props.collapsible,
            expandIcon: props.expandIcon,
            expandIconPosition: props.expandIconPosition,
            size: props.size,
            dragIcon: props.dragIcon,
            hideDragIcon: props.hideDragIcon,
            onChange: onChange,
            isGray: item.key === dragActiveId,
            isLast: index === props.items.length - 1
          }, item.key);
        })
      }), /*#__PURE__*/jsx(DragOverlay, {
        dropAnimation: {
          duration: 0
        },
        children: dragActiveId ? /*#__PURE__*/jsx(SortableItem, {
          className: "overlay-sortable-item",
          item: props.items.filter(function (item) {
            return item.key === dragActiveId;
          })[0],
          openKeys: openKeys,
          collapsible: props.collapsible,
          expandIcon: props.expandIcon,
          expandIconPosition: props.expandIconPosition,
          size: props.size,
          dragIcon: props.dragIcon,
          hideDragIcon: props.hideDragIcon,
          onChange: onChange
        }, dragActiveId) : null
      })]
    })
  });
};

export { DragCollapse as D };
//# sourceMappingURL=drag-collapse-wL7wIgVO.js.map