@fle-ui/next 1.0.0-alpha.2 → 1.0.0-alpha.4

package/components/upload/components/dragger.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { Upload as AntdUpload } from 'antd';
+
+import type { DraggerProps as AntdUploadDraggerProps } from 'antd/es/upload/Dragger';
+
+export interface DraggerProps extends AntdUploadDraggerProps {}
+
+const { Dragger: AntdUploadDragger } = AntdUpload;
+
+const Dragger: FC<DraggerProps> = (props) => {
+  const { children, ...otherProps } = props;
+
+  return <AntdUploadDragger {...otherProps}>{children}</AntdUploadDragger>;
+};
+
+export default Dragger;

package/components/upload/components/upload.tsx

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+import { Upload as AntdUpload } from 'antd';
+
+import type { UploadProps as AntdUploadProps } from 'antd/es/upload';
+
+export interface UploadProps extends AntdUploadProps {}
+
+const Upload = forwardRef<unknown, UploadProps>((props, ref) => {
+  const { children, ...otherProps } = props;
+
+  return (
+    <AntdUpload ref={ref} {...otherProps}>
+      {children}
+    </AntdUpload>
+  );
+});
+
+export default Upload;

package/components/upload/demo/avatar.jsx

@@ -0,0 +1,78 @@
+/**
+ * title: 用户头像
+ * desc: 点击上传用户头像，并使用 `beforeUpload` 限制用户上传的图片格式和大小。
+ */
+
+import React from 'react';
+import { Upload } from '@fle-ui/next';
+import { message } from 'antd';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+
+function getBase64(img, callback) {
+  const reader = new FileReader();
+  reader.addEventListener('load', () => callback(reader.result));
+  reader.readAsDataURL(img);
+}
+
+function beforeUpload(file) {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isJpgOrPng) {
+    message.error('You can only upload JPG/PNG file!');
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error('Image must smaller than 2MB!');
+  }
+  return isJpgOrPng && isLt2M;
+}
+
+class Demo extends React.Component {
+  state = {
+    loading: false,
+  };
+
+  handleChange = (info) => {
+    if (info.file.status === 'uploading') {
+      this.setState({ loading: true });
+      return;
+    }
+    if (info.file.status === 'done') {
+      // Get this url from response in real world.
+      getBase64(info.file.originFileObj, (imageUrl) =>
+        this.setState({
+          imageUrl,
+          loading: false,
+        }),
+      );
+    }
+  };
+
+  render() {
+    const { loading, imageUrl } = this.state;
+    const uploadButton = (
+      <div>
+        {loading ? <LoadingOutlined /> : <PlusOutlined />}
+        <div style={{ marginTop: 8 }}>Upload</div>
+      </div>
+    );
+    return (
+      <Upload
+        name="avatar"
+        listType="picture-card"
+        className="avatar-uploader"
+        showUploadList={false}
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        beforeUpload={beforeUpload}
+        onChange={this.handleChange}
+      >
+        {imageUrl ? (
+          <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
+        ) : (
+          uploadButton
+        )}
+      </Upload>
+    );
+  }
+}
+
+export default Demo;

package/components/upload/demo/basic.tsx

@@ -0,0 +1,37 @@
+/**
+ * title: 点击上传
+ * desc: 经典款式，用户点击按钮弹出文件选择框。
+ */
+
+import React from 'react';
+import { Upload, Button } from '@fle-ui/next';
+import { message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+const props = {
+  name: 'file',
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+  headers: {
+    authorization: 'authorization-text',
+  },
+  onChange(info: any) {
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully`);
+    } else if (info.file.status === 'error') {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  },
+};
+
+const Demo = () => {
+  return (
+    <Upload {...props}>
+      <Button icon={<UploadOutlined />}>Click to Upload</Button>
+    </Upload>
+  );
+};
+
+export default Demo;

package/components/upload/demo/crop-image.jsx

@@ -0,0 +1,54 @@
+/**
+ * title: 上传前裁切图片
+ * desc: 配合 [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) 实现上传前裁切图片。
+ */
+
+import React, { useState } from 'react';
+import { Upload } from '@fle-ui/next';
+import ImgCrop from 'antd-img-crop';
+
+const Demo = () => {
+  const [fileList, setFileList] = useState([
+    {
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+  ]);
+
+  const onChange = ({ fileList: newFileList }) => {
+    setFileList(newFileList);
+  };
+
+  const onPreview = async (file) => {
+    let src = file.url;
+    if (!src) {
+      src = await new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file.originFileObj);
+        reader.onload = () => resolve(reader.result);
+      });
+    }
+    const image = new Image();
+    image.src = src;
+    const imgWindow = window.open(src);
+    imgWindow.document.write(image.outerHTML);
+  };
+
+  return (
+    <ImgCrop rotate>
+      <Upload
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        listType="picture-card"
+        fileList={fileList}
+        onChange={onChange}
+        onPreview={onPreview}
+      >
+        {fileList.length < 5 && '+ Upload'}
+      </Upload>
+    </ImgCrop>
+  );
+};
+
+export default Demo;

package/components/upload/demo/customize-progress-bar.jsx

@@ -0,0 +1,45 @@
+/**
+ * title: 自定义进度条样式
+ * desc: 使用 `progress` 属性自定义进度条样式。
+ */
+
+import React from 'react';
+import { Upload, Button } from '@fle-ui/next';
+import { message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+const props = {
+  name: 'file',
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+  headers: {
+    authorization: 'authorization-text',
+  },
+  onChange(info) {
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully`);
+    } else if (info.file.status === 'error') {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  },
+  progress: {
+    strokeColor: {
+      '0%': '#108ee9',
+      '100%': '#87d068',
+    },
+    strokeWidth: 3,
+    format: (percent) => `${parseFloat(percent.toFixed(2))}%`,
+  },
+};
+
+const Demo = () => {
+  return (
+    <Upload {...props}>
+      <Button icon={<UploadOutlined />}>Click to Upload</Button>
+    </Upload>
+  );
+};
+
+export default Demo;

package/components/upload/demo/defaultFileList.jsx

@@ -0,0 +1,51 @@
+/**
+ * title: 已上传的文件列表
+ * desc: 使用 `defaultFileList` 设置已上传的内容。
+ */
+
+import React from 'react';
+import { Upload, Button } from '@fle-ui/next';
+import { UploadOutlined } from '@ant-design/icons';
+
+const props = {
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+  onChange({ file, fileList }) {
+    if (file.status !== 'uploading') {
+      console.log(file, fileList);
+    }
+  },
+  defaultFileList: [
+    {
+      uid: '1',
+      name: 'xxx.png',
+      status: 'done',
+      response: 'Server Error 500', // custom error message to show
+      url: 'http://www.baidu.com/xxx.png',
+    },
+    {
+      uid: '2',
+      name: 'yyy.png',
+      status: 'done',
+      url: 'http://www.baidu.com/yyy.png',
+    },
+    {
+      uid: '3',
+      name: 'zzz.png',
+      status: 'error',
+      response: 'Server Error 500', // custom error message to show
+      url: 'http://www.baidu.com/zzz.png',
+    },
+  ],
+};
+
+class Demo extends React.Component {
+  render() {
+    return (
+      <Upload {...props}>
+        <Button icon={<UploadOutlined />}>Upload</Button>
+      </Upload>
+    );
+  }
+}
+
+export default Demo;

package/components/upload/demo/directory.tsx

@@ -0,0 +1,18 @@
+/**
+ * title: 文件夹上传
+ * desc: 支持上传一个文件夹里的所有文件。
+ */
+
+import React from 'react';
+import { Upload, Button } from '@fle-ui/next';
+import { UploadOutlined } from '@ant-design/icons';
+
+const Demo = () => {
+  return (
+    <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
+      <Button icon={<UploadOutlined />}>Upload Directory</Button>
+    </Upload>
+  );
+};
+
+export default Demo;

package/components/upload/demo/drag-sorting.jsx

@@ -0,0 +1,132 @@
+/**
+ * title: 上传列表拖拽排序
+ * desc: 使用 `itemRender` ，我们可以集成 react-dnd 来实现对上传列表拖拽排序。
+ */
+
+import React, { useState, useCallback, useRef } from 'react';
+import { Upload, Button } from '@fle-ui/next';
+import { Tooltip } from 'antd';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import update from 'immutability-helper';
+import { UploadOutlined } from '@ant-design/icons';
+
+const type = 'DragableUploadList';
+
+const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
+  const ref = React.useRef();
+  const index = fileList.indexOf(file);
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: type,
+    collect: (monitor) => {
+      const { index: dragIndex } = monitor.getItem() || {};
+      if (dragIndex === index) {
+        return {};
+      }
+      return {
+        isOver: monitor.isOver(),
+        dropClassName:
+          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+      };
+    },
+    drop: (item) => {
+      moveRow(item.index, index);
+    },
+  });
+  const [, drag] = useDrag({
+    type,
+    item: { index },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+  const errorNode = (
+    <Tooltip title="Upload Error">{originNode.props.children}</Tooltip>
+  );
+  return (
+    <div
+      ref={ref}
+      className={`ant-upload-draggable-list-item ${
+        isOver ? dropClassName : ''
+      }`}
+      style={{ cursor: 'move' }}
+    >
+      {file.status === 'error' ? errorNode : originNode}
+    </div>
+  );
+};
+
+const Demo = () => {
+  const [fileList, setFileList] = useState([
+    {
+      uid: '-1',
+      name: 'image1.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-2',
+      name: 'image2.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-3',
+      name: 'image3.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-4',
+      name: 'image4.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-5',
+      name: 'image.png',
+      status: 'error',
+    },
+  ]);
+
+  const moveRow = useCallback(
+    (dragIndex, hoverIndex) => {
+      const dragRow = fileList[dragIndex];
+      setFileList(
+        update(fileList, {
+          $splice: [
+            [dragIndex, 1],
+            [hoverIndex, 0, dragRow],
+          ],
+        }),
+      );
+    },
+    [fileList],
+  );
+
+  const onChange = ({ fileList: newFileList }) => {
+    setFileList(newFileList);
+  };
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <Upload
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        fileList={fileList}
+        onChange={onChange}
+        itemRender={(originNode, file, currFileList) => (
+          <DragableUploadListItem
+            originNode={originNode}
+            file={file}
+            fileList={currFileList}
+            moveRow={moveRow}
+          />
+        )}
+      >
+        <Button icon={<UploadOutlined />}>Click to Upload</Button>
+      </Upload>
+    </DndProvider>
+  );
+};
+export default Demo;