@fe-free/core 2.0.6 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @fe-free/core
 
+## 2.1.0
+
+### Minor Changes
+
+- feat: upload
+
+### Patch Changes
+
+- @fe-free/tool@2.1.0
+
 ## 2.0.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -38,7 +38,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.0.6"
+    "@fe-free/tool": "2.1.0"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/form/form.stories.tsx

@@ -1,11 +1,15 @@
 import { ProForm } from '@ant-design/pro-components';
 import {
   ProFormEditor,
+  ProFormImageUpload,
+  ProFormImageUploadDragger,
   ProFormJSON,
   ProFormJavascript,
   ProFormListNumber,
   ProFormListText,
   ProFormSwitchNumber,
+  ProFormUpload,
+  ProFormUploadDragger,
 } from '@fe-free/core';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
@@ -136,3 +140,97 @@ export const ProFormListNumberComponent: Story = {
     </ProFormBase>
   ),
 };
+
+function customRequest(option: any) {
+  const { file, onProgress, onSuccess } = option;
+
+  // 模拟上传进度
+  let percent = 0;
+  const interval = setInterval(() => {
+    percent += 10;
+    onProgress({ percent });
+
+    if (percent >= 100) {
+      clearInterval(interval);
+      // 模拟上传成功
+      onSuccess({
+        data: {
+          url: `https://picsum.photos/200/300?random=${Date.now()}`,
+          name: file.name,
+          uid: file.uid,
+        },
+      });
+    }
+  }, 100);
+
+  // 返回 abort 方法，用于取消上传
+  return {
+    abort: () => {
+      clearInterval(interval);
+      console.log('上传已取消');
+    },
+  };
+}
+
+export const ProFormUploadComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormUpload label="file" name="file" fieldProps={{ customRequest }} />
+      <ProFormUploadDragger
+        label="file_dragger"
+        name="file_dragger"
+        fieldProps={{ customRequest }}
+      />
+      <ProFormUploadDragger
+        label="files_dragger"
+        name="files_dragger"
+        fieldProps={{ multiple: true, maxCount: 2, customRequest }}
+      />
+      <ProFormUpload
+        label="files"
+        name="files"
+        fieldProps={{ multiple: true, maxCount: 2, showCount: true, customRequest }}
+      />
+      <ProFormUpload
+        label="files_picture"
+        name="files_picture"
+        fieldProps={{ multiple: true, maxCount: 2, listType: 'picture', customRequest }}
+      />
+      <ProFormUpload
+        label="files_picture_card"
+        name="files_picture_card"
+        fieldProps={{ multiple: true, maxCount: 2, listType: 'picture-card', customRequest }}
+      />
+    </ProFormBase>
+  ),
+};
+
+export const ProFormImageUploadComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormImageUpload
+        label="image"
+        name="image"
+        fieldProps={{
+          customRequest,
+        }}
+      />
+      <ProFormImageUploadDragger
+        label="image_dragger"
+        name="image_dragger"
+        fieldProps={{
+          customRequest,
+        }}
+      />
+      <ProFormImageUploadDragger
+        label="images_dragger"
+        name="images_dragger"
+        fieldProps={{
+          multiple: true,
+          maxCount: 2,
+          customRequest,
+        }}
+      />
+    </ProFormBase>
+  ),
+};

package/src/form/index.tsx

@@ -1,7 +1,6 @@
 export { ProFormListNumber, ProFormListText } from './form_list/form_list';
 export { ProFormListHelper } from './form_list/form_list_helper';
 export { ProFormListModalHelper } from './form_list/form_list_modal_helper';
-
 export { ProFormEditor } from './pro_form_editor';
 export { ProFormJavascript } from './pro_form_javascript';
 export { ProFormJSON } from './pro_form_json';
@@ -10,6 +9,12 @@ export {
   SwitchNumber,
   type SwitchNumberProps,
 } from './pro_form_switch_number';
+export {
+  ProFormImageUpload,
+  ProFormImageUploadDragger,
+  ProFormUpload,
+  ProFormUploadDragger,
+} from './pro_form_upload';
 
 import { pinyinMatch } from '@fe-free/tool';
 

package/src/form/pro_form_upload.tsx

@@ -0,0 +1,50 @@
+// 避免循环引用
+import { ProForm, type ProFormItemProps } from '@ant-design/pro-components';
+import type {
+  ImageUploadDraggerProps,
+  ImageUploadProps,
+  UploadDraggerProps,
+  UploadProps,
+} from '../upload';
+import { ImageUpload, ImageUploadDragger, Upload, UploadDragger } from '../upload';
+
+function ProFormUpload(props: ProFormItemProps<UploadProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <Upload {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+function ProFormUploadDragger(props: ProFormItemProps<UploadDraggerProps>) {
+  const { fieldProps, ...rest } = props;
+  return (
+    <ProForm.Item {...rest}>
+      <UploadDragger {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+function ProFormImageUpload(props: ProFormItemProps<ImageUploadProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <ImageUpload {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+function ProFormImageUploadDragger(props: ProFormItemProps<ImageUploadDraggerProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <ImageUploadDragger {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+export { ProFormImageUpload, ProFormImageUploadDragger, ProFormUpload, ProFormUploadDragger };

package/src/index.ts

@@ -13,6 +13,8 @@ export { EditorMention } from './editor_mention';
 export type { EditorMentionProps } from './editor_mention';
 export {
   ProFormEditor,
+  ProFormImageUpload,
+  ProFormImageUploadDragger,
   ProFormJSON,
   ProFormJavascript,
   ProFormListHelper,
@@ -20,6 +22,8 @@ export {
   ProFormListNumber,
   ProFormListText,
   ProFormSwitchNumber,
+  ProFormUpload,
+  ProFormUploadDragger,
   proFormSelectSearchProps,
 } from './form';
 export { Markdown } from './markdown';

package/src/upload/index.tsx

@@ -0,0 +1,173 @@
+// 避免循环引用
+import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
+import { Upload as AntdUpload, Button, message } from 'antd';
+import classNames from 'classnames';
+import { useCallback, useMemo, useState } from 'react';
+
+interface UploadBaseProps {
+  value?: string[] | string;
+  onChange?: (value?: string[] | string) => void;
+  multiple?: boolean;
+  maxCount?: number;
+  action?: string;
+  customRequest?: AntdUploadProps['customRequest'];
+  listType?: AntdUploadProps['listType'];
+  accept?: string;
+}
+
+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;
+  // 转换成 Upload 格式。
+  const defaultFileList = useMemo(() => {
+    if (!value) {
+      return [];
+    }
+
+    const arr = (multiple ? value : [value]) as string[];
+    return arr.map((url) => ({ uid: url, url, name: url?.split('/').pop() || '' })) as UploadFile[];
+  }, [multiple, value]);
+
+  // 存起来，已选的文件。以便做一些判断。
+  const [fileList, setFileList] = useState<UploadFile[]>(defaultFileList);
+
+  const handleChange = useCallback(
+    (info) => {
+      setFileList(info.fileList);
+
+      // 找到真正上传成功的。
+      const newValue = info.fileList
+        .map((item) => item.url || item.response?.data.url)
+        .filter(Boolean);
+
+      onChange?.(multiple ? newValue : newValue[0]);
+    },
+    [multiple, onChange],
+  );
+
+  // 选文件还是可能多选，如果多选，则提示。
+  const handleBeforeUpload = useCallback(
+    (f, fl) => {
+      // 多选 >1 情况下，超出的则提示。
+      if (multiple && maxCount && maxCount > 1) {
+        const index = fl.findIndex((item) => item.uid === f.uid);
+        if (index >= maxCount - fileList.length) {
+          message.warning(`最多只能上传 ${maxCount} 个文件，超出部分会忽略。`);
+        }
+      }
+
+      return true;
+    },
+    [fileList, multiple, maxCount],
+  );
+
+  // 多选情况下，超出则上传按钮 disabled
+  const isDisabled = useMemo(() => {
+    if (multiple && maxCount && maxCount > 1) {
+      return fileList.length >= maxCount;
+    }
+    return false;
+  }, [fileList.length, maxCount, multiple]);
+
+  return {
+    onChange: handleChange,
+    beforeUpload: handleBeforeUpload,
+    isDisabled,
+    fileList,
+  };
+}
+
+function Upload(props: ImageUploadProps) {
+  const { multiple, maxCount, showCount, action, customRequest, listType, accept } = props;
+  const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
+
+  return (
+    <AntdUpload
+      action={action}
+      customRequest={customRequest}
+      onChange={onChange}
+      accept={accept}
+      listType={listType}
+      defaultFileList={fileList}
+      maxCount={multiple ? maxCount : 1}
+      multiple={multiple}
+      beforeUpload={beforeUpload}
+      // 不可，否则会没法删除
+      // disabled={isDisabled}
+    >
+      {listType === 'picture-card' ? (
+        <button style={{ border: 0, background: 'none' }} type="button" disabled={isDisabled}>
+          <PlusOutlined />
+          <div style={{ marginTop: 8 }}>本地上传</div>
+        </button>
+      ) : (
+        <Button icon={<UploadOutlined />} disabled={isDisabled}>
+          本地上传{showCount && multiple ? `（${fileList.length}/${maxCount}）` : ''}
+        </Button>
+      )}
+    </AntdUpload>
+  );
+}
+
+function UploadDragger(props: ImageUploadDraggerProps) {
+  const { multiple, maxCount, action, customRequest, listType, accept } = props;
+  const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
+
+  return (
+    <AntdUpload.Dragger
+      action={action}
+      customRequest={customRequest}
+      onChange={onChange}
+      accept={accept}
+      listType={listType}
+      defaultFileList={fileList}
+      maxCount={multiple ? maxCount : 1}
+      multiple={multiple}
+      beforeUpload={beforeUpload}
+      // 不可，否则会没法删除
+      // disabled={isDisabled}
+    >
+      <div
+        className={classNames({
+          'cursor-not-allowed': isDisabled,
+        })}
+      >
+        <p className={classNames('ant-upload-drag-icon')}>
+          <InboxOutlined
+            className={classNames({
+              '!text-desc': isDisabled,
+            })}
+          />
+        </p>
+        <p
+          className={classNames('ant-upload-text', {
+            '!text-desc': isDisabled,
+          })}
+        >
+          点击或拖拽到此区域进行上传
+        </p>
+      </div>
+    </AntdUpload.Dragger>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface ImageUploadProps extends UploadProps {}
+function ImageUpload(props: ImageUploadProps) {
+  return <Upload {...props} accept="image/*" listType="picture" />;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface ImageUploadDraggerProps extends UploadProps {}
+function ImageUploadDragger(props: ImageUploadDraggerProps) {
+  return <UploadDragger {...props} accept="image/*" listType="picture" />;
+}
+
+export { ImageUpload, ImageUploadDragger, Upload, UploadDragger };
+export type { ImageUploadDraggerProps, ImageUploadProps, UploadDraggerProps, UploadProps };