Skip to content

Commit

Permalink
feat(upload): complete upload component
Browse files Browse the repository at this point in the history
yehuozhili committed Jun 22, 2020
1 parent 90918bd commit 536e209
Showing 12 changed files with 655 additions and 3 deletions.
1 change: 1 addition & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -39,6 +39,7 @@ const loaderFn = () => {
require("../src/components/MultiSelect/multiselect.stories.mdx"),
require("../src/components/AutoComplete/autocomplete.stories.mdx"),
require("../src/components/Form/form.stories.mdx"),
require("../src/components/Upload/upload.stories.mdx"),
require("../src/components/List/list.stories.mdx"),
require("../src/components/VirtualList/virtuallist.stories.mdx"),
require("../src/components/Icon/icon.stories.mdx"),
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bigbear-ui",
"version": "0.1.28",
"version": "0.1.29",
"description": "Neumorphic component library for React;基于React制作的拟物风格组件库",
"keywords": [
"component",
@@ -29,6 +29,7 @@
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"react-transition-group": "^4.4.1"
},
2 changes: 2 additions & 0 deletions src/components/Icon/icon.stories.mdx
Original file line number Diff line number Diff line change
@@ -103,6 +103,8 @@ library.add(faTimes);
<Icon icon='map-market-alt' ></Icon>
<Icon icon='atom' ></Icon>
<Icon icon='filter' ></Icon>
<Icon icon='image' ></Icon>
<Icon icon='file-alt' ></Icon>
</div>
</Story>
</Preview>
6 changes: 5 additions & 1 deletion src/components/Icon/icon.tsx
Original file line number Diff line number Diff line change
@@ -30,6 +30,8 @@ import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons/faMapMarkerAlt";
import { faAtom } from "@fortawesome/free-solid-svg-icons/faAtom";
import { faFilter } from "@fortawesome/free-solid-svg-icons/faFilter";
import { faFileAlt } from "@fortawesome/free-solid-svg-icons/faFileAlt";
import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";

library.add(
faCoffee,
@@ -59,7 +61,9 @@ library.add(
faCheckCircle,
faMapMarkerAlt,
faAtom,
faFilter
faFilter,
faFileAlt,
faImage
);

export type ThemeProps =
37 changes: 37 additions & 0 deletions src/components/Upload/_style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.bigbear-upload-list{
padding: 10px;
.bigbear-upload-li{
list-style-type: none;
.bigbear-alert > span:nth-child(1){
font-size: $font-size-sm;
}
.bigbear-progress-wrapper{
@include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
border:none;
}
}
}
.bigbear-alert.upload-success{
color:$success;
}
.bigbear-alert.upload-failed{
color:$danger;
}
.bigbear-upload-input{
margin-bottom: 5px;
}
.bigbear-upload-showchoose{
margin-top: 10px;
margin-bottom: 10px;
}
.bigbear-upload-btn{
display: inline-block;
}

.bigbear-upload-imageli{
display: inline-block;
.bigbear-avatar {
text-align: center;
line-height:$avatar-size-lg - $avatar-padding-lg*2;
}
}
3 changes: 3 additions & 0 deletions src/components/Upload/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Upload from "./upload";

export default Upload;
130 changes: 130 additions & 0 deletions src/components/Upload/upload.stories.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
import Upload from './upload';



<Meta title='ENTRY| Upload 上传' component={Upload} />

<br/>

# Upload 上传

<br/>

## 基本使用

<Preview>
<Story name='upload'>
<Upload successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload>
</Story>
</Preview>

## 上传进度

type='progress'可以下方附加进度信息。

注意uid需要唯一

<Preview>
<Story name='onProgress'>
<Upload filename={()=>'avatar'}
defaultProgressBar={[{
filename: 'hello.md',
percent: 100,
status: "success",
uid: '111',
size: 1222,
raw: null
},{
filename: 'hello2.md',
percent: 0,
status: "failed",
uid: '1112',
size: 12222,
raw: null
},{
filename: 'hello3.md',
percent: 40,
status: "upload",
uid: '1113',
size: 12222,
raw: null
},{
filename: 'hello4.md',
percent: 80,
status: "upload",
uid: '11132',
size: 12222,
raw: null
}
]}
type={'progress'}
successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload>
</Story>
</Preview>


## 确认上传

confirm 为 true 可进行分段上传

<Preview>
<Story name='upload3'>
<Upload filename={()=>'avatar'} confirm={true} successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload>
</Story>
</Preview>


## 图片回显

文件验证需要自行添加

传入uploadNumber可以控制最大上传数量

<Preview>
<Story name='img'>
<Upload filename={()=>'avatar'} confirm={true} type='img'
uploadNumber={3}
defaultProgressBar={[{
filename: 'hello.md',
percent: 100,
status: "success",
uid: '111',
size: 1222,
raw: null
},{
filename: 'hello2.md',
percent: 0,
status: "failed",
uid: '1112',
size: 12222,
raw: null
},{
filename: 'hello3.md',
percent: 40,
status: "upload",
uid: '1113',
size: 12222,
raw: null
},{
filename: 'hello4.md',
percent: 80,
status: "upload",
uid: '11132',
size: 12222,
raw: null
}
]}
successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload>
</Story>
</Preview>

<Preview>
<Story name='img2'>
<Upload filename={()=>'avatar'} type='img'
successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload>
</Story>
</Preview>


<Props of={Upload}></Props>
Loading

0 comments on commit 536e209

Please sign in to comment.