@rainbow-oh/yee-c 0.9.2 → 0.10.0

package/dist/esm/Upload/dragger.js

@@ -18,7 +18,8 @@ var Dragger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     t = _useLocale.t;
   var renderChildren = function renderChildren() {
     return children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-icon")
+      className: "".concat(prefixCls, "-icon"),
+      "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement(UploadIcon, {
       size: 22
     })), /*#__PURE__*/React.createElement("span", {
@@ -29,11 +30,15 @@ var Dragger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     type: "drag",
     ref: ref
   }), /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(prefixCls), _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled)),
+    className: clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled)),
+    role: "button",
+    "aria-disabled": disabled,
     tabIndex: disabled ? -1 : 0,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        e.target.click();
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        var _event$currentTarget$;
+        event.preventDefault();
+        (_event$currentTarget$ = event.currentTarget.parentElement) === null || _event$currentTarget$ === void 0 || (_event$currentTarget$ = _event$currentTarget$.querySelector('input[type="file"]')) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.click();
       }
     }
   }, renderChildren()));

package/dist/esm/Upload/index.d.ts

@@ -4,5 +4,5 @@ type UploadType = typeof InternalUpload & {
     Dragger: typeof Dragger;
 };
 declare const Upload: UploadType;
-export type { UploadProps } from './interface';
+export type { UploadDraggerProps, UploadFile, UploadInstance, UploadProps, UploadRequestAbort, UploadRequestOptions, } from './interface';
 export default Upload;

package/dist/esm/Upload/interface.d.ts

@@ -1,122 +1,74 @@
 import React from 'react';
 import type { DataAttributeProps } from '../utils/types';
 export type UploadFile = {
-    /**
-     * File upload status
-     */
+    /** File upload status */
     status: 'uploading' | 'error' | 'success' | 'ready';
-    /**
-     * Unique file id, auto-generated if not set
-     */
+    /** Unique file id. Files selected by Upload receive an id automatically. */
     uid?: string;
-    /**
-     * File name
-     */
+    /** File name */
     name: string;
-    /**
-     * File size
-     */
-    size: number;
-    /**
-     * Upload progress
-     */
+    /** File size in bytes */
+    size?: number;
+    /** Upload progress */
     percent?: number;
-    /**
-     * Source file
-     */
-    raw: File;
-    /**
-     * File type, determined by file extension
-     */
+    /** Source file. This can be omitted for files that already exist remotely. */
+    raw?: File;
+    /** MIME type or file extension */
     type?: string;
-    /**
-     * Upload response content
-     */
+    /** Remote file URL */
+    url?: string;
+    /** Upload response content */
     response?: any;
-    /**
-     * Upload error message
-     */
+    /** Upload error */
     error?: Error;
 };
+export type UploadRequestAbort = (() => void) | {
+    abort: () => void;
+};
+export interface UploadRequestOptions {
+    file: File;
+    onProgress: (percent: number) => void;
+    onError: (error: Error) => void;
+    onSuccess: (response: any) => void;
+}
 export interface UploadProps extends DataAttributeProps {
-    /**
-     * Custom prefix class name
-     */
+    /** Custom prefix class name */
     prefixCls?: string;
-    /**
-     * Child nodes
-     */
+    /** Child nodes */
     children?: React.ReactNode;
-    /**
-     * Custom class name
-     */
+    /** Custom class name */
     className?: string;
-    /**
-     * Custom inline style
-     */
+    /** Custom inline style */
     style?: React.CSSProperties;
-    /**
-     * Upload type
-     */
+    /** Upload type */
     type?: 'drag' | 'select';
-    /**
-     * File parameter name sent to the server
-     * @default 'file'
-     */
+    /** File parameter name sent to the server @default 'file' */
     name?: string;
-    /**
-     * Upload URL
-     */
+    /** Upload URL */
     action?: string | (() => string);
-    /**
-     * Additional parameters for upload
-     */
+    /** Additional parameters for upload */
     data?: Record<string, any> | ((file: File) => Record<string, any>);
-    /**
-     * Whether to send cookies with upload
-     */
+    /** Whether to send cookies with upload */
     withCredentials?: boolean;
-    /**
-     * Set upload request headers
-     */
+    /** Set upload request headers */
     headers?: Record<string, any>;
-    /**
-     * Accepted file types for upload
-     */
+    /** Accepted file types for upload */
     accept?: string;
-    /**
-     * Whether to support multiple file selection
-     */
+    /** Whether to support multiple file selection */
     multiple?: boolean;
-    /**
-     * Whether to support folder upload
-     */
+    /** Whether to support folder upload */
     directory?: boolean;
-    /**
-     * Whether disabled
-     */
+    /** Whether disabled */
     disabled?: boolean;
-    /**
-     * Maximum file size in bytes
-     */
+    /** Maximum file size in bytes */
     maxFileSize?: number;
-    /**
-     * Maximum number of files to upload
-     */
+    /** Maximum number of files to upload */
     maxCount?: number;
-    /**
-     * Set upload list type
-     */
+    /** Set upload list type */
     listType?: 'text' | 'picture-list' | 'picture-wall';
-    /**
-     * Whether to show upload progress
-     * @default true
-     */
+    /** Whether to show upload progress @default true */
     progress?: boolean;
-    /**
-     * Whether to show the uploaded file list
-     * @default true
-     */
+    /** Whether to show the uploaded file list @default true */
     showUploadList?: boolean | {
         showTooltip?: boolean;
         showRemoveIcon?: boolean;
@@ -126,51 +78,46 @@ export interface UploadProps extends DataAttributeProps {
         reloadIcon?: React.ReactNode;
         previewIcon?: React.ReactNode;
     };
-    /**
-     * Custom upload list item render
-     */
+    /** Custom upload list item render */
     itemRender?: (file: UploadFile, fileList: UploadFile[]) => React.ReactNode;
-    /**
-     * Default uploaded files
-     */
+    /** Default uploaded files */
     defaultFileList?: Array<UploadFile>;
-    /**
-     * Uploaded files in controlled mode
-     */
+    /** Uploaded files in controlled mode */
     fileList?: Array<UploadFile>;
     /**
-     * Callback before uploading a file
+     * Whether to upload automatically after files are selected.
+     * Set to false to only collect files into the list and trigger them
+     * later via the instance method `upload()`.
+     * @default true
      */
-    beforeUpload?: (file: File, fileList: Array<File>) => boolean | Promise<File | boolean>;
+    autoUpload?: boolean;
+    /** Callback before uploading a file */
+    beforeUpload?: (file: File, fileList: Array<File>) => boolean | File | PromiseLike<File | boolean>;
     /**
-     * Custom upload implementation
-     */
-    customRequest?: (options: {
-        file: File;
-        onProgress: (percent: number) => void;
-        onError: (error: Error) => void;
-        onSuccess: (response: any) => void;
-    }) => void;
-    /**
-     * Callback when upload status changes
+     * Custom upload implementation. Return an abort function or object to make
+     * remove, retry, and unmount cancel the active request.
      */
+    customRequest?: (options: UploadRequestOptions) => void | UploadRequestAbort;
+    /** Callback when upload status changes */
     onChange?: (params: {
         file: UploadFile;
         fileList: Array<UploadFile>;
         event?: any;
     }) => void;
-    /**
-     * Callback when file link or preview icon is clicked
-     */
+    /** Callback when file link or preview icon is clicked */
     onPreview?: (file: UploadFile) => void;
-    /**
-     * Callback when a file is removed
-     */
-    onRemove?: (file: UploadFile) => boolean | Promise<boolean>;
+    /** Callback when a file is removed */
+    onRemove?: (file: UploadFile) => boolean | PromiseLike<boolean>;
 }
 export interface UploadDraggerProps extends UploadProps {
-    /**
-     * Upload hint
-     * */
+    /** Upload hint */
     hint?: React.ReactNode;
 }
+export type UploadInstance = HTMLDivElement & {
+    /**
+     * Upload files waiting in the list (status 'ready'). Without arguments
+     * uploads every ready file; accepts a single file or a list of files.
+     * Combine with `autoUpload={false}` to trigger uploads manually.
+     */
+    upload: (file?: UploadFile | UploadFile[]) => void;
+};

package/dist/esm/Upload/style/index.less

@@ -4,14 +4,33 @@
   position: relative;
 
   &-input {
+    position: relative;
     display: flex;
 
+    &:focus-within {
+      outline: 2px solid var(--yee-primary-color);
+      outline-offset: 2px;
+      border-radius: var(--yee-radius);
+    }
+
     &-disabled {
       cursor: not-allowed;
       opacity: 0.5;
     }
   }
 
+  &-native-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   &-disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -34,12 +53,12 @@
     }
 
     &:hover {
-      border-color: var(--yee-color-primary);
+      border-color: var(--yee-primary-color);
     }
 
     &-hover {
-      border-color: var(--yee-color-primary);
-      background-color: var(--yee-color-primary-bg);
+      border-color: var(--yee-primary-color);
+      background-color: var(--yee-primary-color-bg);
     }
   }
 
@@ -68,8 +87,8 @@
       background-color: var(--yee-color-bg-container);
 
       &:hover {
-        border-color: var(--yee-color-primary);
-        color: var(--yee-color-primary);
+        border-color: var(--yee-primary-color);
+        color: var(--yee-primary-color);
       }
     }
 
@@ -106,7 +125,7 @@
         align-items: center;
         justify-content: center;
         padding: 8px;
-        color: var(--yee-color-error);
+        color: var(--yee-error-color);
       }
 
       &-operate {
@@ -122,10 +141,11 @@
         gap: 8px;
         opacity: 0;
         transition: opacity 0.3s;
+      }
 
-        &:hover {
-          opacity: 1;
-        }
+      &:hover &-operate,
+      &:focus-within &-operate {
+        opacity: 1;
       }
     }
 
@@ -201,7 +221,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 8px 12px;
+      padding: 0 12px;
       border-radius: var(--yee-radius);
       transition: all 0.3s;
 
@@ -216,6 +236,12 @@
   }
 
   &-item {
+
+    &-label {
+      display: flex;
+      align-items: center;
+    }
+
     &-icon {
       display: flex;
       align-items: center;
@@ -224,6 +250,7 @@
 
     &-name-content {
       flex: 1;
+      font-size: 14px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -243,15 +270,15 @@
   // 上传状态样式
   &-state {
     &-uploading {
-      color: var(--yee-color-primary);
+      color: var(--yee-primary-color);
     }
 
     &-error {
-      color: var(--yee-color-error);
+      color: var(--yee-error-color);
     }
 
     &-success {
-      color: var(--yee-color-success);
+      color: var(--yee-success-color);
     }
   }
 

package/dist/esm/Upload/upload.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { UploadProps } from './interface';
+import type { UploadInstance, UploadProps } from './interface';
 import './style/index.less';
-declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
+declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<UploadInstance>>;
 export default Upload;