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

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

@@ -1,54 +0,0 @@
-/**
- * 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/demos/customize-progress-bar.jsx

@@ -1,45 +0,0 @@
-/**
- * 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/demos/defaultFileList.jsx

@@ -1,51 +0,0 @@
-/**
- * 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/demos/directory.tsx

@@ -1,18 +0,0 @@
-/**
- * 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/demos/drag-sorting.jsx

@@ -1,132 +0,0 @@
-/**
- * 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;

package/components/upload/demos/drag.tsx

@@ -1,50 +0,0 @@
-/**
- * title: 拖拽上传
- * desc: 把文件拖入指定区域，完成上传，同样支持点击上传。
- */
-
-import React from 'react';
-import { Upload } from '@fle-ui/next';
-import { message } from 'antd';
-import { InboxOutlined } from '@ant-design/icons';
-
-const { Dragger } = Upload;
-
-const props = {
-  name: 'file',
-  multiple: true,
-  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-  onChange(info: any) {
-    const { status } = info.file;
-    if (status !== 'uploading') {
-      console.log(info.file, info.fileList);
-    }
-    if (status === 'done') {
-      message.success(`${info.file.name} file uploaded successfully.`);
-    } else if (status === 'error') {
-      message.error(`${info.file.name} file upload failed.`);
-    }
-  },
-  onDrop(e: any) {
-    console.log('Dropped files', e.dataTransfer.files);
-  },
-};
-
-const Demo = () => {
-  return (
-    <Dragger {...props}>
-      <p className="ant-upload-drag-icon">
-        <InboxOutlined />
-      </p>
-      <p className="ant-upload-text">
-        Click or drag file to this area to upload
-      </p>
-      <p className="ant-upload-hint">
-        Support for a single or bulk upload. Strictly prohibit from uploading
-        company data or other band files
-      </p>
-    </Dragger>
-  );
-};
-
-export default Demo;

package/components/upload/demos/fileList.jsx

@@ -1,55 +0,0 @@
-/**
- * title: 完全控制的上传列表
- * desc: 使用 `fileList` 对列表进行完全控制，可以实现各种自定义功能，以下演示二种情况： <br /> <br /> 1. 上传列表数量的限制。<br /> <br />2. 读取远程路径并显示链接。
- */
-
-import React from 'react';
-import { Upload, Button } from '@fle-ui/next';
-import { UploadOutlined } from '@ant-design/icons';
-
-class Demo extends React.Component {
-  state = {
-    fileList: [
-      {
-        uid: '-1',
-        name: 'xxx.png',
-        status: 'done',
-        url: 'http://www.baidu.com/xxx.png',
-      },
-    ],
-  };
-
-  handleChange = (info) => {
-    let fileList = [...info.fileList];
-
-    // 1. Limit the number of uploaded files
-    // Only to show two recent uploaded files, and old ones will be replaced by the new
-    fileList = fileList.slice(-2);
-
-    // 2. Read from response and show file link
-    fileList = fileList.map((file) => {
-      if (file.response) {
-        // Component will show file.url as link
-        file.url = file.response.url;
-      }
-      return file;
-    });
-
-    this.setState({ fileList });
-  };
-
-  render() {
-    const props = {
-      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-      onChange: this.handleChange,
-      multiple: true,
-    };
-    return (
-      <Upload {...props} fileList={this.state.fileList}>
-        <Button icon={<UploadOutlined />}>Upload</Button>
-      </Upload>
-    );
-  }
-}
-
-export default Demo;

package/components/upload/demos/max-count.jsx

@@ -1,32 +0,0 @@
-/**
- * title: 限制数量
- * desc: 通过 `maxCount` 限制上传数量。当为 `1` 时，始终用最新上传的代替当前。
- */
-
-import React from 'react';
-import { Upload, Button, Space } from '@fle-ui/next';
-import { UploadOutlined } from '@ant-design/icons';
-
-const Demo = () => {
-  return (
-    <Space direction="vertical" style={{ width: '100%' }} size="large">
-      <Upload
-        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-        listType="picture"
-        maxCount={1}
-      >
-        <Button icon={<UploadOutlined />}>Upload (Max: 1)</Button>
-      </Upload>
-      <Upload
-        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-        listType="picture"
-        maxCount={3}
-        multiple
-      >
-        <Button icon={<UploadOutlined />}>Upload (Max: 3)</Button>
-      </Upload>
-    </Space>
-  );
-};
-
-export default Demo;