@ant-design/x/lib/file-card/List.js

Craft AI-driven interfaces effortlessly

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _icons = require("@ant-design/icons");
var _motion = require("@rc-component/motion");
var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
var _antd = require("antd");
var _clsx = require("clsx");
var _react = _interopRequireDefault(require("react"));
var _xProvider = require("../x-provider");
var _FileCard = _interopRequireDefault(require("./FileCard"));
var _style = _interopRequireDefault(require("./style"));
const List = props => {
  const {
    prefixCls: customizePrefixCls,
    className,
    rootClassName,
    classNames = {},
    style,
    styles = {},
    items,
    size,
    removable,
    onRemove,
    extension,
    overflow
  } = props;
  const containerRef = _react.default.useRef(null);
  const [list, setList] = _react.default.useState([]);
  _react.default.useEffect(() => {
    const list = items.map((item, index) => ({
      ...item,
      key: item.key || `${item.name}-${index}`
    }));
    setList(list);
  }, [items]);
  const {
    direction,
    getPrefixCls
  } = (0, _xProvider.useXProviderContext)();
  const prefixCls = getPrefixCls('file-card', customizePrefixCls);
  const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
  const compCls = `${prefixCls}-list`;
  const [pingStart, setPingStart] = _react.default.useState(false);
  const [pingEnd, setPingEnd] = _react.default.useState(false);
  const {
    root: classNameRoot,
    card: classNameCard,
    ...classNameOther
  } = classNames;
  const mergedCls = (0, _clsx.clsx)(compCls, rootClassName, className, classNameRoot, hashId, cssVarCls, {
    [`${prefixCls}-rtl`]: direction === 'rtl'
  });
  const checkPing = () => {
    const containerEle = containerRef.current;
    if (!containerEle) {
      return;
    }
    if (overflow === 'scrollX') {
      setPingStart(Math.abs(containerEle.scrollLeft) >= 1);
      setPingEnd(containerEle.scrollWidth - containerEle.clientWidth - Math.abs(containerEle.scrollLeft) >= 1);
    } else if (overflow === 'scrollY') {
      setPingStart(containerEle.scrollTop !== 0);
      setPingEnd(containerEle.scrollHeight - containerEle.clientHeight !== containerEle.scrollTop);
    }
  };
  const onScrollOffset = offset => {
    const containerEle = containerRef.current;
    if (containerEle) {
      containerEle.scrollTo({
        left: containerEle.scrollLeft + offset * containerEle.clientWidth,
        behavior: 'smooth'
      });
    }
  };
  const onScrollLeft = () => {
    onScrollOffset(-1);
  };
  const onScrollRight = () => {
    onScrollOffset(1);
  };
  const handleRemove = (item, key) => {
    const newList = list?.filter(i => i.key !== key);
    setList(newList);
    onRemove?.(item);
  };
  const {
    root,
    card: _,
    ...other
  } = styles;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(mergedCls)
  }, /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
    disabled: !overflow || overflow === 'wrap',
    onResize: () => {
      checkPing();
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(`${compCls}-content`, {
      [`${compCls}-overflow-${props.overflow}`]: overflow,
      [`${compCls}-overflow-ping-start`]: pingStart,
      [`${compCls}-overflow-ping-end`]: pingEnd,
      [`${compCls}-small`]: size === 'small'
    }),
    dir: direction,
    style: {
      ...style,
      ...styles?.root
    },
    ref: containerRef,
    onScroll: checkPing
  }, /*#__PURE__*/_react.default.createElement(_motion.CSSMotionList, {
    keys: list.map(item => ({
      key: item.key,
      item
    })),
    motionName: `${compCls}-motion`,
    component: false,
    motionAppear: false,
    motionLeave: true,
    motionEnter: true
  }, ({
    key,
    item,
    className: motionCls,
    style: motionStyle
  }) => {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _clsx.clsx)(`${compCls}-item`, motionCls),
      style: {
        ...motionStyle,
        ...root
      },
      key: key
    }, /*#__PURE__*/_react.default.createElement(_FileCard.default, (0, _extends2.default)({}, item, {
      size: size,
      key: key,
      className: (0, _clsx.clsx)(item.className, classNameCard),
      classNames: {
        ...classNameOther,
        ...item.classNames
      },
      style: {
        ...item.style,
        ...styles?.card
      },
      styles: other
    })), (typeof removable === 'function' ? removable(item) : removable) && /*#__PURE__*/_react.default.createElement("div", {
      className: `${compCls}-remove`,
      onClick: () => handleRemove(item, key)
    }, /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, null)));
  }), overflow === 'scrollX' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Button, {
    size: "small",
    shape: "circle",
    className: `${compCls}-prev-btn`,
    icon: /*#__PURE__*/_react.default.createElement(_icons.LeftOutlined, null),
    onClick: onScrollLeft
  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
    size: "small",
    shape: "circle",
    className: `${compCls}-next-btn`,
    icon: /*#__PURE__*/_react.default.createElement(_icons.RightOutlined, null),
    onClick: onScrollRight
  })), extension)));
};
var _default = exports.default = List;