Browse Source

feat[pc-components]: DageUpload add some params

chenlei 5 months ago
parent
commit
3791228dee

+ 35 - 0
packages/backend-cli/template/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @dage/backend-template
 
+## 1.0.22
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/pc-components@1.3.11
+
+## 1.0.21
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/pc-components@1.3.10
+
+## 1.0.20
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/pc-components@1.3.9
+
+## 1.0.19
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/pc-components@1.3.8
+
+## 1.0.18
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/pc-components@1.3.7
+
 ## 1.0.17
 
 ### Patch Changes

+ 1 - 1
packages/backend-cli/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/backend-template",
-  "version": "1.0.17",
+  "version": "1.0.22",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.1.4",

+ 43 - 0
packages/docs/docs/components/Upload/index.md

@@ -101,6 +101,49 @@ export default () => {
 };
 ```
 
+### 自定义上传按钮样式
+
+```tsx
+import React, { useCallback, useState } from "react";
+import {
+  DageUpload,
+  DageUploadProvider,
+  DageUploadConsumer,
+  DageUploadType,
+  DageFileResponseType,
+} from "@dage/pc-components";
+import { Button } from "antd";
+
+export default () => {
+  const [value, setValue] = useState<DageFileResponseType[]>([]);
+
+  const handleChange = useCallback((list: DageFileResponseType[]) => {
+    setValue(list);
+  }, []);
+
+  return (
+    <DageUploadProvider>
+      <DageUploadConsumer>
+        {({ uploading }) => (
+          <DageUpload
+            value={value}
+            maxCount={2}
+            maxSize={20}
+            dType={DageUploadType.DOC}
+            action="/api/cms/norm/file/upload"
+            onChange={handleChange}
+          >
+            <Button type="primary" loading={uploading}>
+              上传文件
+            </Button>
+          </DageUpload>
+        )}
+      </DageUploadConsumer>
+    </DageUploadProvider>
+  );
+};
+```
+
 ## API
 
 <API hideTitle exports='["DageUpload"]' src='@dage/pc-components/index.d.ts'></API>

+ 18 - 0
packages/docs/docs/log/PC-COMPONENTS_CHANGELOG.md

@@ -1,5 +1,23 @@
 # @dage/pc-components
 
+## 1.3.11
+
+### Patch Changes
+
+- fix: metadata.json undefined
+
+## 1.3.9
+
+### Patch Changes
+
+- `DageUpload` 新增了一些参数
+
+## 1.3.8
+
+### Patch Changes
+
+- `DageUpload` 新增自定义上传按钮样式
+
 ## 1.3.6
 
 ### Patch Changes

+ 18 - 0
packages/pc-components/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @dage/pc-components
 
+## 1.3.11
+
+### Patch Changes
+
+- fix: metadata.json undefined
+
+## 1.3.9
+
+### Patch Changes
+
+- `DageUpload` 新增了一些参数
+
+## 1.3.8
+
+### Patch Changes
+
+- `DageUpload` 新增自定义上传按钮样式
+
 ## 1.3.6
 
 ### Patch Changes

+ 1 - 1
packages/pc-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/pc-components",
-  "version": "1.3.6",
+  "version": "1.3.11",
   "description": "PC 端组件库",
   "module": "dist/index.js",
   "main": "dist/index.js",

+ 23 - 14
packages/pc-components/src/components/DageUpload/index.tsx

@@ -43,6 +43,8 @@ export const DageUpload: FC<DageUploadProps> = ({
   disabled,
   name = "file",
   downloadErrorMessage = "下载失败",
+  children,
+  className,
   onChange,
   ...rest
 }) => {
@@ -218,27 +220,34 @@ export const DageUpload: FC<DageUploadProps> = ({
   };
 
   return (
-    <UploadContainer>
+    <UploadContainer className={className}>
       {[DageUploadType.MODEL, DageUploadType.MOBILE_MODEL].includes(dType) ? (
         <AntdDragger style={{ padding: "0 24px", width: "320px" }} {...props}>
-          <CloudUploadOutlined style={{ fontSize: "40px", color: "#1677ff" }} />
+          {children || (
+            <>
+              <CloudUploadOutlined
+                style={{ fontSize: "40px", color: "#1677ff" }}
+              />
 
-          <AntdDraggerText>
-            将文件拖到此处,或<span>点击上传</span>
-          </AntdDraggerText>
-          <UploadTips className="dage-upload__tips">{tips}</UploadTips>
+              <AntdDraggerText>
+                将文件拖到此处,或<span>点击上传</span>
+              </AntdDraggerText>
+              <UploadTips className="dage-upload__tips">{tips}</UploadTips>
+            </>
+          )}
         </AntdDragger>
       ) : (
         <>
           <AntdUpload {...props}>
-            {isPictureCard ? (
-              !disabled &&
-              (!value || value.length < maxCount) && <PlusOutlined />
-            ) : (
-              <Button disabled={disabled} icon={<UploadOutlined />}>
-                上传
-              </Button>
-            )}
+            {children ||
+              (isPictureCard ? (
+                !disabled &&
+                (!value || value.length < maxCount) && <PlusOutlined />
+              ) : (
+                <Button disabled={disabled} icon={<UploadOutlined />}>
+                  上传
+                </Button>
+              ))}
           </AntdUpload>
 
           {!!tips && (

+ 2 - 0
packages/pc-components/src/components/DageUpload/types.ts

@@ -39,6 +39,8 @@ export interface DageUploadProps<T = DageFileAPIResponseType>
     | "headers"
     | "data"
     | "name"
+    | "className"
+    | "children"
   > {
   /**
    * 上传地址