Skip to content

Commit dd5fdf7

Browse files
cuilanxincuilanxin
committed
refactor(FileInput): 重构上传输入框 uiwjs#845 
1 parent a584eab commit dd5fdf7

File tree

6 files changed

+579
-247
lines changed

6 files changed

+579
-247
lines changed

‎packages/react-file-input/src/Card.tsx

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
import React from 'react';
2+
import {
3+
FileInputCardWarp,
4+
FileInputCardBoxWarp,
5+
FileInputCardActionsWarp,
6+
FileInputCardBoxInfoWarp,
7+
FileInputCardActionsRemoveWarp,
8+
} from './style';
29
import Icon from '@uiw/react-icon';
310
import { FileInputListProps } from './';
411
import './style/index.less';
@@ -21,41 +28,42 @@ const Card = (props: FileInputListProps) => {
2128
onPreview,
2229
onRemove,
2330
} = props;
24-
const cls = [prefixCls, `${prefixCls}-size-${size}`, `${prefixCls}-shape-${shape}`, className]
25-
.filter(Boolean)
26-
.join(' ')
27-
.trim();
28-
2931
const isAction = showFileIcon.showPreviewIcon || showFileIcon.showRemoveIcon ? true : false;
3032

3133
return (
32-
<div className={cls}>
34+
<FileInputCardWarp shape={shape} size={size} className={`${prefixCls} ${className}`}>
3335
{dataList.map((item, index) => (
34-
<div className={`${prefixCls}-box`} key={index}>
35-
<div className={`${prefixCls}-box-info`}>
36+
<FileInputCardBoxWarp className={`${prefixCls}-box`} key={index}>
37+
<FileInputCardBoxInfoWarp className={`${prefixCls}-box-info`}>
3638
<img src={item['dataURL']} alt="" />
37-
</div>
39+
</FileInputCardBoxInfoWarp>
3840

39-
<div className={isAction ? `${prefixCls}-actions` : ''}>
41+
<FileInputCardActionsWarp className={isAction ? `${prefixCls}-actions` : ''} isAction={isAction}>
4042
{showFileIcon?.showPreviewIcon && (
41-
<span className={`${prefixCls}-actions-remove`} onClick={() => onPreview?.(item)}>
43+
<FileInputCardActionsRemoveWarp
44+
className={`${prefixCls}-actions-remove`}
45+
onClick={() => onPreview?.(item)}
46+
>
4247
<Icon type="search" style={{ color: '#fff', fontSize: 16 }} />
43-
</span>
48+
</FileInputCardActionsRemoveWarp>
4449
)}
4550
{showFileIcon?.showRemoveIcon && (
46-
<span className={`${prefixCls}-actions-remove`} onClick={() => onRemove?.(index)}>
51+
<FileInputCardActionsRemoveWarp
52+
className={`${prefixCls}-actions-remove`}
53+
onClick={() => onRemove?.(index)}
54+
>
4755
<Icon type="delete" style={{ color: '#fff', fontSize: 16 }} />
48-
</span>
56+
</FileInputCardActionsRemoveWarp>
4957
)}
50-
</div>
51-
</div>
58+
</FileInputCardActionsWarp>
59+
</FileInputCardBoxWarp>
5260
))}
5361
{maxNumber > dataList.length && !readonly && (
54-
<div className={`${prefixCls}-box ${prefixCls}-btn`} onClick={onAdd}>
62+
<FileInputCardBoxWarp className={`${prefixCls}-box ${prefixCls}-btn`} btn onClick={onAdd}>
5563
{children}
56-
</div>
64+
</FileInputCardBoxWarp>
5765
)}
58-
</div>
66+
</FileInputCardWarp>
5967
);
6068
};
6169

‎packages/react-file-input/src/Input.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
2-
import Input, { InputProps } from '@uiw/react-input';
2+
import { InputProps } from '@uiw/react-input';
33
import { FileInputProps } from './';
4+
import { FileInputWarp } from './style';
45

56
export interface InputUploadProps extends FileInputProps, InputProps {}
67

78
export default React.forwardRef<HTMLInputElement, InputUploadProps>((props, ref) => {
8-
const { className, dataLabel = 'Browse', prefixCls = 'w-fileinput', ...other } = props;
9-
const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
10-
return <Input ref={ref} data-label={dataLabel} className={cls} {...other} type="file" />;
9+
const { className, dataLabel = 'Browse', ...other } = props;
10+
const cls = [className].filter(Boolean).join(' ').trim();
11+
return <FileInputWarp ref={ref} data-label={dataLabel} className={cls} {...other} type="file" />;
1112
});

‎packages/react-file-input/src/List.tsx

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
import React from 'react';
22
import Icon from '@uiw/react-icon';
33
import { FileInputListProps } from './';
4+
import {
5+
FileInputListWarp,
6+
FileInputListActionsWarp,
7+
FileInputListActionsSearchWarp,
8+
FileInputListUploadTypeWarp,
9+
FileInputListUploadInfoTypeWarp,
10+
FileInputListUploadTextTypeWarp,
11+
FileInputListUploadIconTypeWarp,
12+
} from './style';
413
import './style/index.less';
514

615
const Picture = (props: FileInputListProps) => {
716
const {
817
className,
918
prefixCls = 'w-fileinput-list',
1019
dataList = [],
11-
uploadType,
20+
uploadType, // 'input' | 'picture' | 'text' | 'card';
1221
size = 'middle',
1322
shape = 'round',
1423
readonly,
@@ -22,13 +31,10 @@ const Picture = (props: FileInputListProps) => {
2231
onRemove,
2332
} = props;
2433

25-
const cls = [prefixCls, `${prefixCls}-size-${size}`, `${prefixCls}-shape-${shape}`, className]
26-
.filter(Boolean)
27-
.join(' ')
28-
.trim();
34+
const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
2935

3036
return (
31-
<div className={cls}>
37+
<FileInputListWarp uploadType={uploadType} size={size} shape={shape} className={cls}>
3238
{children &&
3339
!readonly &&
3440
React.isValidElement(children) &&
@@ -37,29 +43,37 @@ const Picture = (props: FileInputListProps) => {
3743
})}
3844
<div>
3945
{dataList.map((item, index) => (
40-
<div className={`${prefixCls}-${uploadType}`} key={index}>
46+
<FileInputListUploadTypeWarp className={`${prefixCls}-${uploadType}`} uploadType={uploadType} key={index}>
4147
{uploadType === 'picture' && (
42-
<div className={`${prefixCls}-info ${prefixCls}-${uploadType}-info`}>
48+
<FileInputListUploadInfoTypeWarp className={`${prefixCls}-info ${prefixCls}-${uploadType}-info`}>
4349
<img src={item['dataURL']} alt="" />
4450
{showFileIcon?.showPreviewIcon && (
45-
<div className={`${prefixCls}-actions`}>
46-
<span className={`${prefixCls}-actions-search`} onClick={() => onPreview?.(item)}>
51+
<FileInputListActionsWarp className={`${prefixCls}-actions`}>
52+
<FileInputListActionsSearchWarp
53+
className={`${prefixCls}-actions-search`}
54+
onClick={() => onPreview?.(item)}
55+
>
4756
<Icon type="search" style={{ color: '#fff', fontSize: 16 }} />
48-
</span>
49-
</div>
57+
</FileInputListActionsSearchWarp>
58+
</FileInputListActionsWarp>
5059
)}
51-
</div>
60+
</FileInputListUploadInfoTypeWarp>
5261
)}
53-
<div className={`${prefixCls}-${uploadType}-text`}>{item.name}</div>
62+
<FileInputListUploadTextTypeWarp className={`${prefixCls}-${uploadType}-text`}>
63+
{item.name}
64+
</FileInputListUploadTextTypeWarp>
5465
{showFileIcon?.showRemoveIcon && (
55-
<div className={`${prefixCls}-${uploadType}-icon`} onClick={() => onRemove?.(index)}>
66+
<FileInputListUploadIconTypeWarp
67+
className={`${prefixCls}-${uploadType}-icon`}
68+
onClick={() => onRemove?.(index)}
69+
>
5670
<Icon type="delete" style={{ color: '#999' }} />
57-
</div>
71+
</FileInputListUploadIconTypeWarp>
5872
)}
59-
</div>
73+
</FileInputListUploadTypeWarp>
6074
))}
6175
</div>
62-
</div>
76+
</FileInputListWarp>
6377
);
6478
};
6579

‎packages/react-file-input/src/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export interface FileInputListProps extends FileInputUploadProps {
2323
onRemove?: (index: number) => void;
2424
}
2525

26-
interface Props {
26+
export interface Props {
2727
uploadType?: UploadType;
2828
[key: string]: any;
2929
}

0 commit comments

Comments
 (0)