'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
require('../../../../utils/index.cjs');
require('../../../../vue-components/index.cjs');
var utils = require('../utils.cjs');
var _interface = require('../interface.cjs');
var index = require('../../../button/index.cjs');
var useConfigInject = require('../../../config-provider/src/hooks/useConfigInject.cjs');
var ListItem = require('./ListItem.cjs');
var props = require('../../../../utils/vue/props.cjs');
var initDefaultProps = require('../../../../utils/vue/initDefaultProps.cjs');
var is = require('../../../../utils/is.cjs');
var collapseMotion = require('../../../../vue-components/transition/src/collapseMotion.cjs');
var transition = require('../../../../vue-components/transition/src/transition.cjs');

function HackSlot(_, {
  slots
}) {
  var _a;
  return props.filterEmpty((_a = slots.default) == null ? void 0 : _a.call(slots))[0];
}
var UploadList = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "AUploadList",
  props: initDefaultProps.initDefaultProps(_interface.uploadListProps(), {
    listType: "text",
    // or picture
    progress: {
      strokeWidth: 2,
      showInfo: false
    },
    showRemoveIcon: true,
    showDownloadIcon: false,
    showPreviewIcon: true,
    previewFile: utils.previewImage,
    isImageUrl: utils.isImageUrl,
    items: [],
    appendActionVisible: true
  }),
  setup(props, {
    slots,
    expose
  }) {
    const motionAppear = vue.shallowRef(false);
    vue.onMounted(() => {
      motionAppear.value === true;
    });
    const mergedItems = vue.shallowRef([]);
    vue.watch(() => props.items, (val = []) => {
      mergedItems.value = val.slice();
    }, {
      immediate: true,
      deep: true
    });
    vue.watchEffect(() => {
      if (props.listType !== "picture" && props.listType !== "picture-card")
        return;
      let hasUpdate = false;
      (props.items || []).forEach((file, index) => {
        if (typeof document === "undefined" || typeof window === "undefined" || !window.FileReader || !window.File || !(file.originFileObj instanceof File || file.originFileObj instanceof Blob) || file.thumbUrl !== void 0)
          return;
        file.thumbUrl = "";
        if (props.previewFile) {
          props.previewFile(file.originFileObj).then((previewDataUrl) => {
            const thumbUrl = previewDataUrl || "";
            if (thumbUrl !== file.thumbUrl) {
              mergedItems.value[index].thumbUrl = thumbUrl;
              hasUpdate = true;
            }
          });
        }
      });
      if (hasUpdate)
        vue.triggerRef(mergedItems);
    });
    const onInternalPreview = (file, e) => {
      if (!props.onPreview)
        return;
      e == null ? void 0 : e.preventDefault();
      return props.onPreview(file);
    };
    const onInternalDownload = (file) => {
      if (typeof props.onDownload === "function")
        props.onDownload(file);
      else if (file.url)
        window.open(file.url);
    };
    const onInternalClose = (file) => {
      var _a;
      (_a = props.onRemove) == null ? void 0 : _a.call(props, file);
    };
    const internalIconRender = ({
      file
    }) => {
      const iconRender = props.iconRender || slots.iconRender;
      if (iconRender)
        return iconRender({
          file,
          listType: props.listType
        });
      const isLoading = file.status === "uploading";
      const fileIcon = props.isImageUrl && props.isImageUrl(file) ? vue.createVNode(iconsVue.PictureTwoTone, null, null) : vue.createVNode(iconsVue.FileTwoTone, null, null);
      let icon = isLoading ? vue.createVNode(iconsVue.LoadingOutlined, null, null) : vue.createVNode(iconsVue.PaperClipOutlined, null, null);
      if (props.listType === "picture")
        icon = isLoading ? vue.createVNode(iconsVue.LoadingOutlined, null, null) : fileIcon;
      else if (props.listType === "picture-card")
        icon = isLoading ? props.locale.uploading : fileIcon;
      return icon;
    };
    const actionIconRender = (opt) => {
      const {
        customIcon,
        callback,
        prefixCls: prefixCls2,
        title
      } = opt;
      const btnProps = {
        type: "text",
        size: "small",
        title,
        onClick: () => {
          callback();
        },
        class: `${prefixCls2}-list-item-action`
      };
      if (is.isValidElement(customIcon))
        return vue.createVNode(index.Button, btnProps, {
          icon: () => customIcon
        });
      return vue.createVNode(index.Button, btnProps, {
        default: () => [vue.createVNode("span", null, [customIcon])]
      });
    };
    expose({
      handlePreview: onInternalPreview,
      handleDownload: onInternalDownload
    });
    const {
      prefixCls,
      rootPrefixCls
    } = useConfigInject.default("upload", props);
    const listClassNames = vue.computed(() => ({
      [`${prefixCls.value}-list`]: true,
      [`${prefixCls.value}-list-${props.listType}`]: true
    }));
    const transitionGroupProps = vue.computed(() => {
      const motion = {
        ...collapseMotion.collapseMotion(`${rootPrefixCls.value}-motion-collapse`)
      };
      delete motion.onAfterAppear;
      delete motion.onAfterEnter;
      delete motion.onAfterLeave;
      const motionConfig = {
        ...transition.getTransitionGroupProps(`${prefixCls.value}-${props.listType === "picture-card" ? "animate-inline" : "animate"}`),
        class: listClassNames.value,
        appear: motionAppear.value
      };
      return props.listType !== "picture-card" ? {
        ...motion,
        ...motionConfig
      } : motionConfig;
    });
    return () => {
      const {
        listType,
        locale,
        isImageUrl: isImgUrl,
        showPreviewIcon,
        showRemoveIcon,
        showDownloadIcon,
        removeIcon,
        previewIcon,
        downloadIcon,
        progress,
        appendAction,
        itemRender,
        appendActionVisible
      } = props;
      const appendActionDom = appendAction == null ? void 0 : appendAction();
      const items = mergedItems.value;
      return vue.createVNode(vue.TransitionGroup, {
        ...transitionGroupProps.value,
        "tag": "div"
      }, {
        default: () => [items.map((file) => {
          const {
            uid: key
          } = file;
          return vue.createVNode(ListItem.default, {
            "key": key,
            "locale": locale,
            "prefixCls": prefixCls.value,
            "file": file,
            "items": items,
            "progress": progress,
            "listType": listType,
            "isImgUrl": isImgUrl,
            "showPreviewIcon": showPreviewIcon,
            "showRemoveIcon": showRemoveIcon,
            "showDownloadIcon": showDownloadIcon,
            "onPreview": onInternalPreview,
            "onDownload": onInternalDownload,
            "onClose": onInternalClose,
            "removeIcon": removeIcon,
            "previewIcon": previewIcon,
            "downloadIcon": downloadIcon,
            "itemRender": itemRender
          }, {
            ...slots,
            iconRender: internalIconRender,
            actionIconRender
          });
        }), appendAction ? vue.withDirectives(vue.createVNode(HackSlot, {
          "key": "__ant_upload_appendAction"
        }, {
          default: () => appendActionDom
        }), [[vue.vShow, !!appendActionVisible]]) : null]
      });
    };
  }
});

exports.default = UploadList;
//# sourceMappingURL=index.cjs.map
