@uni-sw/u-design 2.0.4

package/es/components/UUpload/UploadList/index.js

@@ -0,0 +1,234 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import FileTwoTone from '@ant-design/icons/FileTwoTone';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
+import PictureTwoTone from '@ant-design/icons/PictureTwoTone';
+import classNames from 'classnames';
+import CSSMotion, { CSSMotionList } from 'rc-motion';
+import * as React from 'react';
+import Button from "../../UButton/button";
+import { ConfigContext } from "../../UConfigProvider";
+import useForceUpdate from "../../_util/hooks/useForceUpdate";
+import collapseMotion from "../../_util/motion";
+import { cloneElement, isValidElement } from "../../_util/reactNode";
+import { isImageUrl, previewImage } from "../utils";
+import ListItem from "./ListItem";
+var listItemMotion = Object.assign({}, collapseMotion);
+delete listItemMotion.onAppearEnd;
+delete listItemMotion.onEnterEnd;
+delete listItemMotion.onLeaveEnd;
+var InternalUploadList = function InternalUploadList(props, ref) {
+  var _props$listType = props.listType,
+    listType = _props$listType === void 0 ? 'text' : _props$listType,
+    _props$previewFile = props.previewFile,
+    previewFile = _props$previewFile === void 0 ? previewImage : _props$previewFile,
+    onPreview = props.onPreview,
+    onDownload = props.onDownload,
+    onRemove = props.onRemove,
+    locale = props.locale,
+    iconRender = props.iconRender,
+    _props$isImageUrl = props.isImageUrl,
+    isImgUrl = _props$isImageUrl === void 0 ? isImageUrl : _props$isImageUrl,
+    customizePrefixCls = props.prefixCls,
+    _props$items = props.items,
+    items = _props$items === void 0 ? [] : _props$items,
+    _props$showPreviewIco = props.showPreviewIcon,
+    showPreviewIcon = _props$showPreviewIco === void 0 ? true : _props$showPreviewIco,
+    _props$showRemoveIcon = props.showRemoveIcon,
+    showRemoveIcon = _props$showRemoveIcon === void 0 ? true : _props$showRemoveIcon,
+    _props$showDownloadIc = props.showDownloadIcon,
+    showDownloadIcon = _props$showDownloadIc === void 0 ? false : _props$showDownloadIc,
+    removeIcon = props.removeIcon,
+    previewIcon = props.previewIcon,
+    downloadIcon = props.downloadIcon,
+    _props$progress = props.progress,
+    progress = _props$progress === void 0 ? {
+      strokeWidth: 2,
+      showInfo: false
+    } : _props$progress,
+    appendAction = props.appendAction,
+    _props$appendActionVi = props.appendActionVisible,
+    appendActionVisible = _props$appendActionVi === void 0 ? true : _props$appendActionVi,
+    itemRender = props.itemRender;
+  var forceUpdate = useForceUpdate();
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    motionAppear = _React$useState2[0],
+    setMotionAppear = _React$useState2[1];
+  // ============================= Effect =============================
+  React.useEffect(function () {
+    if (listType !== 'picture' && listType !== 'picture-card') {
+      return;
+    }
+    (items || []).forEach(function (file) {
+      if (typeof document === 'undefined' || typeof window === 'undefined' || !window.FileReader || !window.File || !(file.originFileObj instanceof File || file.originFileObj instanceof Blob) || file.thumbUrl !== undefined) {
+        return;
+      }
+      file.thumbUrl = '';
+      if (previewFile) {
+        previewFile(file.originFileObj).then(function (previewDataUrl) {
+          // Need append '' to avoid dead loop
+          file.thumbUrl = previewDataUrl || '';
+          forceUpdate();
+        });
+      }
+    });
+  }, [listType, items, previewFile]);
+  React.useEffect(function () {
+    setMotionAppear(true);
+  }, []);
+  // ============================= Events =============================
+  var onInternalPreview = function onInternalPreview(file, e) {
+    if (!onPreview) {
+      return;
+    }
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+    return onPreview(file);
+  };
+  var onInternalDownload = function onInternalDownload(file) {
+    if (typeof onDownload === 'function') {
+      onDownload(file);
+    } else if (file.url) {
+      window.open(file.url);
+    }
+  };
+  var onInternalClose = function onInternalClose(file) {
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
+  };
+  var internalIconRender = function internalIconRender(file) {
+    if (iconRender) {
+      return iconRender(file, listType);
+    }
+    var isLoading = file.status === 'uploading';
+    var fileIcon = isImgUrl && isImgUrl(file) ? /*#__PURE__*/React.createElement(PictureTwoTone, null) : /*#__PURE__*/React.createElement(FileTwoTone, null);
+    var icon = isLoading ? /*#__PURE__*/React.createElement(LoadingOutlined, null) : /*#__PURE__*/React.createElement(PaperClipOutlined, null);
+    if (listType === 'picture') {
+      icon = isLoading ? /*#__PURE__*/React.createElement(LoadingOutlined, null) : fileIcon;
+    } else if (listType === 'picture-card') {
+      icon = isLoading ? locale.uploading : fileIcon;
+    }
+    return icon;
+  };
+  var actionIconRender = function actionIconRender(customIcon, callback, prefixCls, title) {
+    var btnProps = {
+      type: 'text',
+      size: 'small',
+      title: title,
+      onClick: function onClick(e) {
+        callback();
+        if (isValidElement(customIcon) && customIcon.props.onClick) {
+          customIcon.props.onClick(e);
+        }
+      },
+      className: "".concat(prefixCls, "-list-item-card-actions-btn")
+    };
+    if (isValidElement(customIcon)) {
+      var btnIcon = cloneElement(customIcon, Object.assign(Object.assign({}, customIcon.props), {
+        onClick: function onClick() {}
+      }));
+      return /*#__PURE__*/React.createElement(Button, Object.assign({}, btnProps, {
+        icon: btnIcon
+      }));
+    }
+    return /*#__PURE__*/React.createElement(Button, Object.assign({}, btnProps), /*#__PURE__*/React.createElement("span", null, customIcon));
+  };
+  // ============================== Ref ===============================
+  // Test needs
+  React.useImperativeHandle(ref, function () {
+    return {
+      handlePreview: onInternalPreview,
+      handleDownload: onInternalDownload
+    };
+  });
+  var _React$useContext = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction;
+  // ============================= Render =============================
+  var prefixCls = getPrefixCls('upload', customizePrefixCls);
+  var listClassNames = classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-list"), true), "".concat(prefixCls, "-list-").concat(listType), true), "".concat(prefixCls, "-list-rtl"), direction === 'rtl'));
+  // >>> Motion config
+  var motionKeyList = _toConsumableArray(items.map(function (file) {
+    return {
+      key: file.uid,
+      file: file
+    };
+  }));
+  var animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
+  // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
+  var motionConfig = {
+    motionDeadline: 2000,
+    motionName: "".concat(prefixCls, "-").concat(animationDirection),
+    keys: motionKeyList,
+    motionAppear: motionAppear
+  };
+  if (listType !== 'picture-card') {
+    motionConfig = Object.assign(Object.assign({}, listItemMotion), motionConfig);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: listClassNames
+  }, /*#__PURE__*/React.createElement(CSSMotionList, Object.assign({}, motionConfig, {
+    component: false
+  }), function (_ref) {
+    var key = _ref.key,
+      file = _ref.file,
+      motionClassName = _ref.className,
+      motionStyle = _ref.style;
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: key,
+      locale: locale,
+      prefixCls: prefixCls,
+      className: motionClassName,
+      style: motionStyle,
+      file: file,
+      items: items,
+      progress: progress,
+      listType: listType,
+      isImgUrl: isImgUrl,
+      showPreviewIcon: showPreviewIcon,
+      showRemoveIcon: showRemoveIcon,
+      showDownloadIcon: showDownloadIcon,
+      removeIcon: removeIcon,
+      previewIcon: previewIcon,
+      downloadIcon: downloadIcon,
+      iconRender: internalIconRender,
+      actionIconRender: actionIconRender,
+      itemRender: itemRender,
+      onPreview: onInternalPreview,
+      onDownload: onInternalDownload,
+      onClose: onInternalClose
+    });
+  }), appendAction && (/*#__PURE__*/React.createElement(CSSMotion, Object.assign({}, motionConfig, {
+    visible: appendActionVisible,
+    forceRender: true
+  }), function (_ref2) {
+    var motionClassName = _ref2.className,
+      motionStyle = _ref2.style;
+    return cloneElement(appendAction, function (oriProps) {
+      return {
+        className: classNames(oriProps.className, motionClassName),
+        style: Object.assign(Object.assign(Object.assign({}, motionStyle), {
+          // prevent the element has hover css pseudo-class that may cause animation to end prematurely.
+          pointerEvents: motionClassName ? 'none' : undefined
+        }), oriProps.style)
+      };
+    });
+  })));
+};
+var UploadList = /*#__PURE__*/React.forwardRef(InternalUploadList);
+if (process.env.NODE_ENV !== 'production') {
+  UploadList.displayName = 'UploadList';
+}
+export default UploadList;

package/es/components/UUpload/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import Dragger from './Dragger';
+import type { UploadProps } from './Upload';
+import InternalUpload from './Upload';
+import './style';
+export type { DraggerProps } from './Dragger';
+export type { RcFile, UploadChangeParam, UploadFile, UploadListProps, UploadProps } from './interface';
+type InternalUploadType = typeof InternalUpload;
+type CompoundedComponent<T = any> = InternalUploadType & {
+    <U extends T>(props: React.PropsWithChildren<UploadProps<U>> & React.RefAttributes<any>): React.ReactElement;
+    Dragger: typeof Dragger;
+    LIST_IGNORE: string;
+};
+declare const Upload: CompoundedComponent<any>;
+export default Upload;

package/es/components/UUpload/index.js

@@ -0,0 +1,7 @@
+import Dragger from "./Dragger";
+import InternalUpload, { LIST_IGNORE } from "./Upload";
+import "./style";
+var Upload = InternalUpload;
+Upload.Dragger = Dragger;
+Upload.LIST_IGNORE = LIST_IGNORE;
+export default Upload;

package/es/components/UUpload/interface.d.ts

@@ -0,0 +1,134 @@
+import type { RcFile as OriRcFile, UploadProps as RcUploadProps, UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
+import type * as React from 'react';
+import type { ProgressProps } from '../UProgress/progress';
+export interface RcFile extends OriRcFile {
+    readonly lastModifiedDate: Date;
+}
+export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
+export interface HttpRequestHeader {
+    [key: string]: string;
+}
+export interface UploadFile<T = any> {
+    uid: string;
+    size?: number;
+    name: string;
+    fileName?: string;
+    lastModified?: number;
+    lastModifiedDate?: Date;
+    url?: string;
+    status?: UploadFileStatus;
+    percent?: number;
+    thumbUrl?: string;
+    crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
+    originFileObj?: RcFile;
+    response?: T;
+    error?: any;
+    linkProps?: any;
+    type?: string;
+    xhr?: T;
+    preview?: string;
+}
+export interface InternalUploadFile<T = any> extends UploadFile<T> {
+    originFileObj: RcFile;
+}
+export interface UploadChangeParam<T = UploadFile> {
+    file: T;
+    fileList: T[];
+    event?: {
+        percent: number;
+    };
+}
+export interface ShowUploadListInterface {
+    showRemoveIcon?: boolean;
+    showPreviewIcon?: boolean;
+    showDownloadIcon?: boolean;
+    removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+}
+export interface UploadLocale {
+    uploading?: string;
+    removeFile?: string;
+    downloadFile?: string;
+    uploadError?: string;
+    previewFile?: string;
+}
+export type UploadType = 'drag' | 'select';
+export type UploadListType = 'text' | 'picture' | 'picture-card';
+export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
+export type ItemRender<T = any> = (originNode: React.ReactElement, file: UploadFile, fileList: Array<UploadFile<T>>, actions: {
+    download: () => void;
+    preview: () => void;
+    remove: () => void;
+}) => React.ReactNode;
+type PreviewFileHandler = (file: File | Blob) => PromiseLike<string>;
+type TransformFileHandler = (file: RcFile) => string | Blob | File | PromiseLike<string | Blob | File>;
+type BeforeUploadValueType = void | boolean | string | Blob | File;
+export interface UploadProps<T = any> extends Pick<RcUploadProps, 'capture'> {
+    type?: UploadType;
+    name?: string;
+    defaultFileList?: Array<UploadFile<T>>;
+    fileList?: Array<UploadFile<T>>;
+    action?: string | ((file: RcFile) => string) | ((file: RcFile) => PromiseLike<string>);
+    directory?: boolean;
+    data?: Record<string, unknown> | ((file: UploadFile<T>) => Record<string, unknown> | Promise<Record<string, unknown>>);
+    method?: 'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch';
+    headers?: HttpRequestHeader;
+    showUploadList?: boolean | ShowUploadListInterface;
+    multiple?: boolean;
+    accept?: string;
+    beforeUpload?: (file: RcFile, FileList: RcFile[]) => BeforeUploadValueType | Promise<BeforeUploadValueType>;
+    onChange?: (info: UploadChangeParam<UploadFile<T>>) => void;
+    onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+    listType?: UploadListType;
+    className?: string;
+    onPreview?: (file: UploadFile<T>) => void;
+    onDownload?: (file: UploadFile<T>) => void;
+    onRemove?: (file: UploadFile<T>) => void | boolean | Promise<void | boolean>;
+    supportServerRender?: boolean;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    prefixCls?: string;
+    customRequest?: (options: RcCustomRequestOptions) => void;
+    withCredentials?: boolean;
+    openFileDialogOnClick?: boolean;
+    locale?: UploadLocale;
+    id?: string;
+    previewFile?: PreviewFileHandler;
+    /** @deprecated Please use `beforeUpload` directly */
+    transformFile?: TransformFileHandler;
+    iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
+    isImageUrl?: (file: UploadFile) => boolean;
+    progress?: UploadListProgressProps;
+    itemRender?: ItemRender<T>;
+    /** Config max count of `fileList`. Will replace current one when `maxCount` is 1 */
+    maxCount?: number;
+    children?: React.ReactNode;
+}
+export interface UploadState<T = any> {
+    fileList: UploadFile<T>[];
+    dragState: string;
+}
+export interface UploadListProps<T = any> {
+    listType?: UploadListType;
+    onPreview?: (file: UploadFile<T>) => void;
+    onDownload?: (file: UploadFile<T>) => void;
+    onRemove?: (file: UploadFile<T>) => void | boolean;
+    items?: Array<UploadFile<T>>;
+    progress?: UploadListProgressProps;
+    prefixCls?: string;
+    showRemoveIcon?: boolean;
+    showDownloadIcon?: boolean;
+    showPreviewIcon?: boolean;
+    removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    locale: UploadLocale;
+    previewFile?: PreviewFileHandler;
+    iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
+    isImageUrl?: (file: UploadFile) => boolean;
+    appendAction?: React.ReactNode;
+    appendActionVisible?: boolean;
+    itemRender?: ItemRender<T>;
+}
+export {};

package/es/components/UUpload/interface.js

@@ -0,0 +1 @@
+export {};

package/es/components/UUpload/style/index.d.ts

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+import '../../UButton/button/style';
+import '../../UProgress/progress/style';
+import '../../UTooltip/tooltip/style';

package/es/components/UUpload/style/index.js

@@ -0,0 +1,7 @@
+import "../../style/index.less";
+import "./index.less";
+// style dependencies
+// deps-lint-skip: form
+import "../../UButton/button/style";
+import "../../UProgress/progress/style";
+import "../../UTooltip/tooltip/style";