@ant-design/x
Version:
Craft AI-driven interfaces effortlessly
236 lines (235 loc) • 7.72 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
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 _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
var _antd = require("antd");
var _clsx = require("clsx");
var _react = _interopRequireWildcard(require("react"));
var _useXComponentConfig = _interopRequireDefault(require("../_util/hooks/use-x-component-config"));
var _xProvider = require("../x-provider");
var _File = _interopRequireDefault(require("./components/File"));
var _ImageLoading = _interopRequireDefault(require("./components/ImageLoading"));
var _audio = _interopRequireDefault(require("./icons/audio"));
var _video = _interopRequireDefault(require("./icons/video"));
var _style = _interopRequireDefault(require("./style"));
var _utils = require("./utils");
var CARD_TYPE = /*#__PURE__*/function (CARD_TYPE) {
CARD_TYPE["FILE"] = "file";
CARD_TYPE["IMAGE"] = "image";
CARD_TYPE["AUDIO"] = "audio";
CARD_TYPE["VIDEO"] = "video";
return CARD_TYPE;
}(CARD_TYPE || {});
const IMAGE_EXT = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg', 'jfif'];
const AUDIO_EXT = ['mp3', 'wav', 'flac', 'ape', 'aac', 'ogg'];
const VIDEO_EXT = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'];
const PRESET_FILE_ICONS = [{
icon: /*#__PURE__*/_react.default.createElement(_icons.FileExcelFilled, null),
color: '#22b35e',
ext: ['xlsx', 'xls'],
key: 'excel'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.FileImageFilled, null),
color: '#8c8c8c',
ext: IMAGE_EXT,
key: 'image'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.FileMarkdownFilled, null),
color: '#8c8c8c',
ext: ['md', 'mdx'],
key: 'markdown'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.FilePdfFilled, null),
color: '#ff4d4f',
ext: ['pdf'],
key: 'pdf'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.FilePptFilled, null),
color: '#ff6e31',
ext: ['ppt', 'pptx'],
key: 'ppt'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.FileWordFilled, null),
color: '#1677ff',
ext: ['doc', 'docx'],
key: 'word'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.FileZipFilled, null),
color: '#fab714',
ext: ['zip', 'rar', '7z', 'tar', 'gz'],
key: 'zip'
}, {
icon: /*#__PURE__*/_react.default.createElement(_video.default, null),
color: '#ff4d4f',
ext: VIDEO_EXT,
key: 'video'
}, {
icon: /*#__PURE__*/_react.default.createElement(_audio.default, null),
color: '#ff6e31',
ext: AUDIO_EXT,
key: 'audio'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.JavaOutlined, null),
color: '#1677ff',
ext: ['java'],
key: 'java'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.JavaScriptOutlined, null),
color: '#fab714',
ext: ['js'],
key: 'javascript'
}, {
icon: /*#__PURE__*/_react.default.createElement(_icons.PythonOutlined, null),
color: '#fab714',
ext: ['py'],
key: 'python'
}];
const DEFAULT_ICON = {
icon: /*#__PURE__*/_react.default.createElement(_icons.FileTextFilled, null),
color: '#8c8c8c',
ext: ['default'],
key: 'default'
};
const FileCard = props => {
const {
prefixCls: customizePrefixCls,
style,
styles = {},
className,
rootClassName,
classNames = {},
name,
byte,
size,
description,
icon: customIcon,
src,
mask,
loading,
type: customType,
onClick,
imageProps,
videoProps,
audioProps,
spinProps,
...restProps
} = props;
const domProps = (0, _pickAttrs.default)(restProps, {
attr: true,
aria: true,
data: true
});
const {
direction,
getPrefixCls
} = (0, _xProvider.useXProviderContext)();
const prefixCls = getPrefixCls('file-card', customizePrefixCls);
const contextConfig = (0, _useXComponentConfig.default)('fileCard');
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
const mergedCls = (0, _clsx.clsx)(prefixCls, contextConfig.className, className, rootClassName, classNames.root, hashId, cssVarCls, {
[`${prefixCls}-rtl`]: direction === 'rtl'
});
const [namePrefix, nameSuffix] = (0, _react.useMemo)(() => {
const nameStr = name || '';
const match = nameStr.match(/^(.*)\.[^.]+$/);
return match ? [match[1], nameStr.slice(match[1].length)] : [nameStr, ''];
}, [name]);
const [icon, iconColor] = (0, _react.useMemo)(() => {
if (typeof customIcon === 'string') {
const match = PRESET_FILE_ICONS.find(item => item.key === customIcon);
if (match) {
return [match.icon, match.color];
}
}
for (const item of PRESET_FILE_ICONS) {
if ((0, _utils.matchExt)(nameSuffix, item.ext)) {
return [item.icon, item.color];
}
}
return [DEFAULT_ICON.icon, DEFAULT_ICON.color];
}, [nameSuffix]);
const fileType = (0, _react.useMemo)(() => {
if (customType) {
return customType;
}
if ((0, _utils.matchExt)(nameSuffix, IMAGE_EXT)) {
return CARD_TYPE.IMAGE;
}
if ((0, _utils.matchExt)(nameSuffix, AUDIO_EXT)) {
return CARD_TYPE.AUDIO;
}
if ((0, _utils.matchExt)(nameSuffix, VIDEO_EXT)) {
return CARD_TYPE.VIDEO;
}
return CARD_TYPE.FILE;
}, [nameSuffix, customType]);
let ContentNode = null;
if (fileType === CARD_TYPE.IMAGE) {
ContentNode = /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.clsx)(`${prefixCls}-image`, classNames.file, {
[`${prefixCls}-loading`]: loading
}),
style: styles.file
}, /*#__PURE__*/_react.default.createElement(_antd.Image, (0, _extends2.default)({
rootClassName: (0, _clsx.clsx)(`${prefixCls}-image-img`),
width: styles?.file?.width,
height: styles?.file?.height,
alt: name,
src: src
}, imageProps)), loading && /*#__PURE__*/_react.default.createElement(_ImageLoading.default, {
spinProps: spinProps,
prefixCls: prefixCls,
style: styles.file
}));
} else if (fileType === CARD_TYPE.VIDEO) {
ContentNode = /*#__PURE__*/_react.default.createElement("video", (0, _extends2.default)({
src: src,
controls: true,
style: styles.file,
className: (0, _clsx.clsx)(`${prefixCls}-video`, classNames.file)
}, videoProps));
} else if (fileType === CARD_TYPE.AUDIO) {
ContentNode = /*#__PURE__*/_react.default.createElement("audio", (0, _extends2.default)({
src: src,
controls: true,
style: styles.file,
className: (0, _clsx.clsx)(`${prefixCls}-audio`, classNames.file)
}, audioProps));
} else {
ContentNode = /*#__PURE__*/_react.default.createElement(_File.default, {
prefixCls: prefixCls,
namePrefix: namePrefix,
name: name,
type: fileType,
src: src,
ext: nameSuffix,
size: size,
byte: byte,
description: description,
icon: customIcon && typeof customIcon !== 'string' ? customIcon : icon,
iconColor: iconColor,
onClick: onClick,
mask: mask,
classNames: classNames,
styles: styles
});
}
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, domProps, {
className: mergedCls,
style: {
...contextConfig.style,
...style,
...styles.root
}
}), ContentNode);
};
if (process.env.NODE_ENV !== 'production') {
FileCard.displayName = 'FileCard';
}
var _default = exports.default = FileCard;