@fe-free/core 3.0.13 → 3.0.15

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 3.0.15
+
+### Patch Changes
+
+- feat: uploader
+  - @fe-free/tool@3.0.15
+
+## 3.0.14
+
+### Patch Changes
+
+- feat: upload
+  - @fe-free/tool@3.0.14
+
 ## 3.0.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.13",
+  "version": "3.0.15",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "3.0.13"
+    "@fe-free/tool": "3.0.15"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/file/helper.tsx

@@ -105,11 +105,11 @@ const PRESET_FILE_ICONS: {
 ];
 
 function isImage(name: string) {
-  return IMG_EXTS.includes(name.split('.').pop() || '');
+  return IMG_EXTS.includes(name.split('.').pop()?.toLowerCase() || '');
 }
 
 function getFileExt(name?: string) {
-  return name?.split('.').pop() || '';
+  return name?.split('.').pop()?.toLowerCase() || '';
 }
 
 function getFileSize(size: number) {

package/src/form/form.stories.tsx

@@ -1,5 +1,6 @@
 import { ProForm } from '@ant-design/pro-components';
 import {
+  ProFormAvatarImageUpload,
   ProFormEditor,
   ProFormImageUpload,
   ProFormImageUploadDragger,
@@ -48,10 +49,7 @@ function ProFormBase({
     <ProForm
       initialValues={initialValues}
       onValuesChange={(newValues) => {
-        setValues({
-          ...values,
-          ...newValues,
-        });
+        setValues(newValues);
       }}
       onFinish={(values) => {
         console.log('values', values);
@@ -230,7 +228,11 @@ export const ProFormUploadComponent: Story = {
       <ProFormUploadDragger
         label="file_dragger"
         name="file_dragger"
-        fieldProps={{ customRequest }}
+        fieldProps={{
+          title: '这是标题',
+          description: '这是描述',
+          customRequest,
+        }}
       />
       <ProFormUploadDragger
         label="files_dragger"
@@ -282,6 +284,13 @@ export const ProFormImageUploadComponent: Story = {
           customRequest,
         }}
       />
+      <ProFormAvatarImageUpload
+        label="avatar_image"
+        name="avatar_image"
+        fieldProps={{
+          customRequest,
+        }}
+      />
     </ProFormBase>
   ),
 };

package/src/form/index.tsx

@@ -14,6 +14,7 @@ export {
   type SwitchOptionsProps,
 } from './pro_form_switch';
 export {
+  ProFormAvatarImageUpload,
   ProFormImageUpload,
   ProFormImageUploadDragger,
   ProFormUpload,

package/src/form/pro_form_upload.tsx

@@ -1,12 +1,19 @@
 // 避免循环引用
 import { ProForm, type ProFormItemProps } from '@ant-design/pro-components';
 import type {
+  AvatarImageUploadProps,
   ImageUploadDraggerProps,
   ImageUploadProps,
   UploadDraggerProps,
   UploadProps,
 } from '../upload';
-import { ImageUpload, ImageUploadDragger, Upload, UploadDragger } from '../upload';
+import {
+  AvatarImageUpload,
+  ImageUpload,
+  ImageUploadDragger,
+  Upload,
+  UploadDragger,
+} from '../upload';
 
 function ProFormUpload(props: ProFormItemProps<UploadProps>) {
   const { fieldProps, ...rest } = props;
@@ -37,6 +44,16 @@ function ProFormImageUpload(props: ProFormItemProps<ImageUploadProps>) {
   );
 }
 
+function ProFormAvatarImageUpload(props: ProFormItemProps<AvatarImageUploadProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <AvatarImageUpload {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
 function ProFormImageUploadDragger(props: ProFormItemProps<ImageUploadDraggerProps>) {
   const { fieldProps, ...rest } = props;
 
@@ -47,4 +64,10 @@ function ProFormImageUploadDragger(props: ProFormItemProps<ImageUploadDraggerPro
   );
 }
 
-export { ProFormImageUpload, ProFormImageUploadDragger, ProFormUpload, ProFormUploadDragger };
+export {
+  ProFormAvatarImageUpload,
+  ProFormImageUpload,
+  ProFormImageUploadDragger,
+  ProFormUpload,
+  ProFormUploadDragger,
+};

package/src/index.ts

@@ -24,6 +24,7 @@ export { EditorMention } from './editor_mention';
 export type { EditorMentionProps } from './editor_mention';
 export { FileCard } from './file';
 export {
+  ProFormAvatarImageUpload,
   ProFormEditor,
   ProFormImageUpload,
   ProFormImageUploadDragger,

package/src/upload/index.tsx

@@ -1,7 +1,7 @@
 // 避免循环引用
-import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { DeleteOutlined, InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
 import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
-import { Upload as AntdUpload, Button, message } from 'antd';
+import { Upload as AntdUpload, Avatar, Button, message } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -19,8 +19,6 @@ interface UploadBaseProps {
 interface UploadProps extends UploadBaseProps {
   showCount?: boolean;
 }
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-interface UploadDraggerProps extends UploadBaseProps {}
 
 function useUpload(props: ImageUploadProps) {
   const { value, onChange, multiple, maxCount } = props;
@@ -115,8 +113,12 @@ function Upload(props: ImageUploadProps) {
   );
 }
 
-function UploadDragger(props: ImageUploadDraggerProps) {
-  const { multiple, maxCount, action, customRequest, listType, accept } = props;
+interface UploadDraggerProps extends UploadBaseProps {
+  title?: string;
+  description?: string;
+}
+function UploadDragger(props: UploadDraggerProps) {
+  const { multiple, maxCount, action, customRequest, listType, accept, title, description } = props;
   const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
 
   return (
@@ -150,8 +152,9 @@ function UploadDragger(props: ImageUploadDraggerProps) {
             '!text-03': isDisabled,
           })}
         >
-          点击或拖拽到此区域进行上传
+          {title || '点击或拖拽到此区域进行上传'}
         </p>
+        {description && <p className={classNames('ant-upload-hint')}>{description}</p>}
       </div>
     </AntdUpload.Dragger>
   );
@@ -169,5 +172,53 @@ function ImageUploadDragger(props: ImageUploadDraggerProps) {
   return <UploadDragger {...props} accept="image/*" listType="picture" />;
 }
 
-export { ImageUpload, ImageUploadDragger, Upload, UploadDragger };
-export type { ImageUploadDraggerProps, ImageUploadProps, UploadDraggerProps, UploadProps };
+interface AvatarImageUploadProps {
+  value?: string;
+  onChange?: (value?: string) => void;
+  action?: string;
+  customRequest?: AntdUploadProps['customRequest'];
+  accept?: string;
+  headers?: AntdUploadProps['headers'];
+}
+function AvatarImageUpload(props: AvatarImageUploadProps) {
+  const { value, onChange, action, customRequest, accept = 'image/*', headers } = props;
+
+  return (
+    <div className="flex gap-2">
+      <Avatar size={80} src={value} shape="square" className="bg-01 shadow" />
+
+      <div className="flex flex-1 flex-col justify-between">
+        <div className="text-03">请选择</div>
+        <div className="flex gap-2">
+          <AntdUpload
+            action={action}
+            customRequest={customRequest}
+            onChange={(info) => {
+              const url = info.file.response?.data.url;
+              if (url) {
+                onChange?.(url);
+              }
+            }}
+            itemRender={() => null}
+            accept={accept}
+            headers={headers}
+          >
+            <Button icon={<UploadOutlined />}>本地上传</Button>
+          </AntdUpload>
+          <Button icon={<DeleteOutlined />} danger onClick={() => onChange?.()}>
+            删除
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { AvatarImageUpload, ImageUpload, ImageUploadDragger, Upload, UploadDragger };
+export type {
+  AvatarImageUploadProps,
+  ImageUploadDraggerProps,
+  ImageUploadProps,
+  UploadDraggerProps,
+  UploadProps,
+};