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

Craft AI-driven interfaces effortlessly

import _extends from "@babel/runtime/helpers/esm/extends";
import { CloseCircleFilled, LeftOutlined, RightOutlined } from '@ant-design/icons';
import { CSSMotionList } from '@rc-component/motion';
import ResizeObserver from '@rc-component/resize-observer';
import { Button } from 'antd';
import { clsx } from 'clsx';
import React from 'react';
import { useXProviderContext } from "../x-provider";
import FileCard from "./FileCard";
import useStyle from "./style";
const List = props => {
  const {
    prefixCls: customizePrefixCls,
    className,
    rootClassName,
    classNames = {},
    style,
    styles = {},
    items,
    size,
    removable,
    onRemove,
    extension,
    overflow
  } = props;
  const containerRef = React.useRef(null);
  const [list, setList] = React.useState([]);
  React.useEffect(() => {
    const list = items.map((item, index) => ({
      ...item,
      key: item.key || `${item.name}-${index}`
    }));
    setList(list);
  }, [items]);
  const {
    direction,
    getPrefixCls
  } = useXProviderContext();
  const prefixCls = getPrefixCls('file-card', customizePrefixCls);
  const [hashId, cssVarCls] = useStyle(prefixCls);
  const compCls = `${prefixCls}-list`;
  const [pingStart, setPingStart] = React.useState(false);
  const [pingEnd, setPingEnd] = React.useState(false);
  const {
    root: classNameRoot,
    card: classNameCard,
    ...classNameOther
  } = classNames;
  const mergedCls = 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.createElement("div", {
    className: clsx(mergedCls)
  }, /*#__PURE__*/React.createElement(ResizeObserver, {
    disabled: !overflow || overflow === 'wrap',
    onResize: () => {
      checkPing();
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: 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.createElement(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.createElement("div", {
      className: clsx(`${compCls}-item`, motionCls),
      style: {
        ...motionStyle,
        ...root
      },
      key: key
    }, /*#__PURE__*/React.createElement(FileCard, _extends({}, item, {
      size: size,
      key: key,
      className: clsx(item.className, classNameCard),
      classNames: {
        ...classNameOther,
        ...item.classNames
      },
      style: {
        ...item.style,
        ...styles?.card
      },
      styles: other
    })), (typeof removable === 'function' ? removable(item) : removable) && /*#__PURE__*/React.createElement("div", {
      className: `${compCls}-remove`,
      onClick: () => handleRemove(item, key)
    }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)));
  }), overflow === 'scrollX' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    size: "small",
    shape: "circle",
    className: `${compCls}-prev-btn`,
    icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
    onClick: onScrollLeft
  }), /*#__PURE__*/React.createElement(Button, {
    size: "small",
    shape: "circle",
    className: `${compCls}-next-btn`,
    icon: /*#__PURE__*/React.createElement(RightOutlined, null),
    onClick: onScrollRight
  })), extension)));
};
export default List;