Skip to content

Commit

Permalink
Merge c10e628 into 6116b62
Browse files Browse the repository at this point in the history
  • Loading branch information
@lzf0402
lzf0402 committed Sep 9, 2018
2 parents 6116b62 + c10e628 commit 69ed8e3
Show file tree
Hide file tree
Showing 15 changed files with 200 additions and 1,160 deletions.
1,054 changes: 4 additions & 1,050 deletions demo/index.css
View file

Large diffs are not rendered by default.

45 changes: 45 additions & 0 deletions demo/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'uxcore-button';
import Uploader from '../src/';
import '../style';
import 'kuma-base/core.less';

// attachment file tips
const tips = <span>请选择大小不超过5M的文本文件，支持doc,docx,xls,xlsx,zip格式，最多3张</span>;
const imgTips = <span>单张不超过3M，支持jpeg,jpg,png格式</span>;
Expand Down Expand Up @@ -235,6 +238,48 @@ ReactDOM.render((
<Demo3 />
), document.getElementById('sample3'));


class Demo31 extends React.Component {
constructor(props) {
super(props);
this.state = {
fileList,
};
}

handleChange(fileList) {
this.setState({
fileList,
});
}
render() {
const me = this;
return (<Uploader
ref="uploader"
sizeLimit="3072kb"
accept="*.jpeg, *.jpg *.png"
readOnly
prefixCls="my-uploader"
multiple={false}
isVisual={false}
progressInterval={100}
queueCapcity={2}
actionOnQueueLimit="cover"
onqueueerror={function (err) { console.log(err); console.log(me.refs.uploader.getCore().getTotal()); }}
fileList={this.state.fileList}
onChange={this.handleChange.bind(this)}
tips={imgTips}
name="file"
url="http://eternalsky.me:8122/file/upload"
locale="zh-cn-img"
/>);
}
}

ReactDOM.render((
<Demo31 />
), document.getElementById('sample3-1'));

class Demo4 extends React.Component {
constructor(props) {
super(props);
Expand Down
2 changes: 1 addition & 1 deletion demo/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
font-size: 14px;
}

#sample4{
#sample4, #sample4-0{
width: 400px;
}

Expand Down
5 changes: 5 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ <h3>Sample3 - 只读样式图片</h3>

<div class="sample" id="sample3"></div>

<!--Sample 3-1-->
<h3>Sample3-1 - 只读样式附件</h3>

<div class="sample" id="sample3-1"></div>

<!--Sample 4-->
<h3>Sample4 - 图片可视化上传</h3>

Expand Down
34 changes: 17 additions & 17 deletions src/DefaultFileItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default class DefaultFileItem extends React.Component {

render() {
const me = this;
const { locale, file, mode, isOnlyImg, isVisual, readStyle, readOnly } = me.props;
const { prefixCls, locale, file, mode, isOnlyImg, isVisual, readStyle, readOnly } = me.props;
let response = util.simpleDeepCopy(file.response);
if (file.type === 'upload') {
response = response.content ? (response.content.data ? response.content.data : response.content) : response.data;
Expand All @@ -26,14 +26,14 @@ export default class DefaultFileItem extends React.Component {
const previewUrl = response.previewUrl === undefined ? downloadUrl : response.previewUrl;
let readOnlyStyle;
if (isOnlyImg) {
const type = isVisual ? 'kuma-upload-fileitem-visual' : 'kuma-upload-fileitem-img';
const type = isVisual ? `${prefixCls}-fileitem-visual` : `${prefixCls}-fileitem-img`;
readOnlyStyle = readOnly ? `${type} read-style` : type;
} else {
readOnlyStyle = readOnly ? 'kuma-upload-fileitem read-style' : 'kuma-upload-fileitem';
readOnlyStyle = readOnly ? `${prefixCls}-fileitem read-style` : `${prefixCls}-fileitem`;
}
if (mode === 'icon') {
return (<div className={'kuma-upload-fileitem'}>
<a className="kuma-upload-action remove-action" onClick={this.onCancel.bind(this)} title={i18n[locale].remove}>
return (<div className={`${prefixCls}-fileitem`}>
<a className={`${prefixCls}-action remove-action`} onClick={this.onCancel.bind(this)} title={i18n[locale].remove}>
<Icon name="shanchu" />
</a>
<div className="filepreview">
Expand All @@ -54,9 +54,9 @@ export default class DefaultFileItem extends React.Component {
</div>
<div className="field-image-name" title={file.name}>{file.name}</div>
<div className="field-status">
{previewUrl ? <a className="kuma-upload-action preview-action" onClick={me.onShowFile.bind(this, file, previewUrl)} target="_blank" href={previewUrl}><Icon name="fangda" /></a> : null}
{downloadUrl ? <a className="kuma-upload-action download-action" target="_blank" download href={downloadUrl}><Icon name="xiazai" /></a> : null}
{response.canRemove !== false && !readOnly ? <a className="kuma-upload-action remove-action" onClick={this.onCancel.bind(this, file)}>
{previewUrl ? <a className={`${prefixCls}-action preview-action`} onClick={me.onShowFile.bind(this, file, previewUrl)} target="_blank" href={previewUrl}><Icon name="fangda" /></a> : null}
{downloadUrl ? <a className={`${prefixCls}-action download-action`} target="_blank" download href={downloadUrl}><Icon name="xiazai" /></a> : null}
{response.canRemove !== false && !readOnly ? <a className={`${prefixCls}-action remove-action`} onClick={this.onCancel.bind(this, file)}>
<Icon name="shanchu" />
</a> : undefined}
</div>
Expand All @@ -69,7 +69,7 @@ export default class DefaultFileItem extends React.Component {
</a>
</div>
<div className="field-status">
{previewUrl ? <a className="kuma-upload-action preview-action" onClick={me.onShowFile.bind(this, file, previewUrl)} target="_blank" href={previewUrl}><Icon name="fangda" /></a> : null}
{previewUrl ? <a className={`${prefixCls}-action preview-action`} onClick={me.onShowFile.bind(this, file, previewUrl)} target="_blank" href={previewUrl}><Icon name="fangda" /></a> : null}
{response.canRemove !== false && !readOnly ? <a className="remove-action" onClick={this.onCancel.bind(this, file)}>
<Icon name="biaodanlei-tongyongqingchu" />
</a> : undefined}
Expand All @@ -78,29 +78,29 @@ export default class DefaultFileItem extends React.Component {
}
return (<div className={readOnlyStyle}>
<label className="field-icon">
<i className="kuma-upload-fileicon" data-ext={file.ext} data-type={file.fileType} />
<i className={`${prefixCls}-fileicon`} data-ext={file.ext} data-type={file.fileType} />
</label>
<div className="field-line" />
<div className="field-info-wrap">
<label className="field-info">
<span className="filename" title={file.name}>{file.name}</span>
</label>
<div className="field-status">
{previewUrl ? <a className="kuma-upload-action preview-action" onClick={me.onShowFile.bind(this, file, previewUrl)} target="_blank" href={previewUrl}><Icon name="fangda" /></a> : null}
{downloadUrl ? <a className="kuma-upload-action download-action" target="_blank" download href={downloadUrl}><Icon name="xiazai" /></a> : null}
{response.canRemove !== false && !readOnly ? <a className="kuma-upload-action remove-action" onClick={this.onCancel.bind(this, file)}><Icon name="shanchu" /></a> : null}
{previewUrl ? <a className={`${prefixCls}-action preview-action`} onClick={me.onShowFile.bind(this, file, previewUrl)} target="_blank" href={previewUrl}><Icon name="fangda" /></a> : null}
{downloadUrl ? <a className={`${prefixCls}-action download-action`} target="_blank" download href={downloadUrl}><Icon name="xiazai" /></a> : null}
{response.canRemove !== false && !readOnly ? <a className={`${prefixCls}-action remove-action`} onClick={this.onCancel.bind(this, file)}><Icon name="shanchu" /></a> : null}
</div>
</div>
</div>);
}
return (<div className={'kuma-upload-fileitem'}>
return (<div className={`${prefixCls}-fileitem`}>
<label className="field-info">
<i className="kuma-upload-fileicon" data-ext={file.ext} data-type={file.fileType} />
<i className={`${prefixCls}-fileicon`} data-ext={file.ext} data-type={file.fileType} />
<span className="filename" title={file.name}>{util.natcut(response.name, 12)}</span>
</label>
<label className="field-status">
<a className="kuma-upload-status status-success"><i className="kuma-icon kuma-icon-choose" /></a>
{!readOnly ? <a className="kuma-upload-action remove-action" onClick={this.onCancel.bind(this, file)} title={i18n[locale].remove}>
<a className={`${prefixCls}-status status-success`}><i className="kuma-icon kuma-icon-choose" /></a>
{!readOnly ? <a className={`${prefixCls}-action remove-action`} onClick={this.onCancel.bind(this, file)} title={i18n[locale].remove}>
<Icon name="shanchu" />
</a> : null}
</label>
Expand Down
48 changes: 24 additions & 24 deletions src/FileItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,25 +71,25 @@ export default class FileItem extends React.Component {

render() {
const me = this;
const { locale, interval } = me.props;
const { locale, interval, prefixCls } = me.props;

if (this.props.mode === 'icon') {
return (<div className={`kuma-upload-fileitem status-${this.state.status}`}>
<a className="kuma-upload-action action-remove" onClick={this.onCancel.bind(this)} title={i18n[locale].remove}>
return (<div className={`${prefixCls}-fileitem status-${this.state.status}`}>
<a className={`${prefixCls}-action action-remove`} onClick={this.onCancel.bind(this)} title={i18n[locale].remove}>
<Icon name="shanchu" />
</a>
<div className="filepreview">
<Preview file={this.props.file} />
{this.state.status === 'error' ? <a className="kuma-upload-action action-retry" onClick={this.onPending.bind(this)} title={i18n[locale].retry}>
<Preview file={this.props.file} prefixCls={prefixCls} />
{this.state.status === 'error' ? <a className={`${prefixCls}-action action-retry`} onClick={this.onPending.bind(this)} title={i18n[locale].retry}>
<i className="kuma-icon kuma-icon-refresh" />
</a> : null}
{this.state.status === 'queued' ? <a className="kuma-upload-action action-upload" onClick={this.onPending.bind(this)} title={i18n[locale].upload}>
{this.state.status === 'queued' ? <a className={`${prefixCls}-action action-upload`} onClick={this.onPending.bind(this)} title={i18n[locale].upload}>
<i className="kuma-icon kuma-icon-triangle-right" />
</a> : null}
{this.state.status === 'progress' || this.state.status === 'pending' ? <Progress file={this.file} interval={interval} percentage={this.state.percentage} /> : null}
</div>
{this.state.status === 'error' ? <a className="kuma-upload-status status-error" title={i18n[locale].upload_failed}><i className="kuma-icon kuma-icon-caution" /></a> : null}
{this.state.status === 'success' ? <a className="kuma-upload-status status-success"><i className="kuma-icon kuma-icon-choose" /></a> : null}
{this.state.status === 'error' ? <a className={`${prefixCls}-status status-error`} title={i18n[locale].upload_failed}><i className="kuma-icon kuma-icon-caution" /></a> : null}
{this.state.status === 'success' ? <a className={`${prefixCls}-status status-success`}><i className="kuma-icon kuma-icon-choose" /></a> : null}
<div className="filename" title={this.file.name}>{util.natcut(this.file.name, 10)}</div>
</div>);
} else if (this.props.mode === 'nw') {
Expand All @@ -103,7 +103,7 @@ export default class FileItem extends React.Component {
}
if (this.props.isOnlyImg) {
if (!this.props.isVisual) {
return (<div className={`kuma-upload-fileitem-img status-${this.state.status}`}>
return (<div className={`${prefixCls}-fileitem-img status-${this.state.status}`}>
<div className="field-image-info">
<a className="field-image-preview" href={previewUrl} target="_blank">
<img src={this.state.url} />
Expand All @@ -112,21 +112,21 @@ export default class FileItem extends React.Component {
{this.state.status !== 'error' && this.state.status !== 'success' ? <Progress file={this.file} interval={interval} /> : null}
<div className="field-image-name" title={this.file.name}>{this.file.name}</div>
<div className="field-status">
<a className="kuma-upload-action close-action" onClick={this.onCancel.bind(this)}>
<a className={`${prefixCls}-action close-action`} onClick={this.onCancel.bind(this)}>
<Icon name="shanchu" />
</a>
</div>
</div>);
}
return (<div className={`kuma-upload-fileitem-visual status-${this.state.status}`}>
return (<div className={`${prefixCls}-fileitem-visual status-${this.state.status}`}>
<div className="field-image-info" />
{/* <div className="error-text">{i18n[locale]['upload_failed']}</div>*/}
{this.state.status !== 'success' ? <Progress interval={interval} isVisual status={this.state.status} onCancel={this.onCancel.bind(this)} onPending={this.onPending.bind(this)} file={this.file} /> : null}
</div>);
}
return (<div className={`kuma-upload-fileitem status-${this.state.status}`}>
return (<div className={`${prefixCls}-fileitem status-${this.state.status}`}>
<label className="field-icon">
{(this.state.status === 'error' || this.state.status === 'success') ? <i className="kuma-upload-fileicon" data-ext={this.file.ext} data-type={this.file.type} /> : null}
{(this.state.status === 'error' || this.state.status === 'success') ? <i className={`${prefixCls}-fileicon`} data-ext={this.file.ext} data-type={this.file.type} /> : null}
</label>
{this.state.status !== 'error' && this.state.status !== 'success' ? <Progress interval={interval} file={this.file} /> : null}
<div className="field-line" />
Expand All @@ -135,34 +135,34 @@ export default class FileItem extends React.Component {
<span className="filename" title={this.file.name}>{this.file.name}</span>
</label>
<label className="field-status">
{this.state.status === 'error' ? <a className="kuma-upload-status status-error">{i18n[locale].upload_failed}</a> : null}
{this.state.status === 'success' && previewUrl ? <a className="kuma-upload-action" target="_blank" href={previewUrl}>{i18n[locale].preview}</a> : null}
{this.state.status === 'success' && downloadUrl ? <a className="kuma-upload-action" target="_blank" href={downloadUrl} download>{i18n[locale].download}</a> : null}
{(this.state.status === 'success' || this.state.status === 'error') ? <a className="kuma-upload-action close-action" onClick={this.onCancel.bind(this)}><Icon name="shanchu" /></a> : <a className="kuma-upload-action terminal-action" onClick={this.onCancel.bind(this)}><Icon name="guanbi" /></a>}
{this.state.status === 'error' ? <a className={`${prefixCls}-status status-error`}>{i18n[locale].upload_failed}</a> : null}
{this.state.status === 'success' && previewUrl ? <a className={`${prefixCls}-action`} target="_blank" href={previewUrl}>{i18n[locale].preview}</a> : null}
{this.state.status === 'success' && downloadUrl ? <a className={`${prefixCls}-action`} target="_blank" href={downloadUrl} download>{i18n[locale].download}</a> : null}
{(this.state.status === 'success' || this.state.status === 'error') ? <a className={`${prefixCls}-action close-action`} onClick={this.onCancel.bind(this)}><Icon name="shanchu" /></a> : <a className="${prefixCls}-action terminal-action" onClick={this.onCancel.bind(this)}><Icon name="guanbi" /></a>}
</label>
</div>
</div>);
}
const size = util.humanSizeFormat(this.file.size);
return (<div className={`kuma-upload-fileitem status-${this.state.status}`}>
return (<div className={`${prefixCls}-fileitem status-${this.state.status}`}>
<label className="field-info">
<i className="kuma-upload-fileicon" data-ext={this.file.ext} data-type={this.file.type} />
<i className={`${prefixCls}-fileicon`} data-ext={this.file.ext} data-type={this.file.type} />
<span className="filename" title={this.file.name}>{util.natcut(this.file.name, 12)}</span>
<span className="filesize">{`/${size}`}</span>
</label>
<label className="field-status">
{this.state.status === 'error' ? <a className="kuma-upload-status status-error" title={i18n[locale].upload_failed}><i className="kuma-icon kuma-icon-caution" /></a> : null}
{this.state.status === 'success' ? <a className="kuma-upload-status status-success"><i className="kuma-icon kuma-icon-choose" /></a> : null}
{this.state.status === 'error' ? <a className={`${prefixCls}-status status-error`} title={i18n[locale].upload_failed}><i className="kuma-icon kuma-icon-caution" /></a> : null}
{this.state.status === 'success' ? <a className={`${prefixCls}-status status-success`}><i className="kuma-icon kuma-icon-choose" /></a> : null}

{this.state.status === 'error' ? <a className="kuma-upload-action action-retry" onClick={this.onPending.bind(this)} title={i18n[locale].retry}>
{this.state.status === 'error' ? <a className={`${prefixCls}-action action-retry`} onClick={this.onPending.bind(this)} title={i18n[locale].retry}>
<i className="kuma-icon kuma-icon-refresh" />
</a> : null}

{this.state.status === 'queued' ? <a className="kuma-upload-action action-upload" onClick={this.onPending.bind(this)} title={i18n[locale].upload}>
{this.state.status === 'queued' ? <a className={`${prefixCls}-action action-upload`} onClick={this.onPending.bind(this)} title={i18n[locale].upload}>
<i className="kuma-icon kuma-icon-triangle-right" />
</a> : null}

<a className="kuma-upload-action action-remove" onClick={this.onCancel.bind(this)} title={i18n[locale].remove}>
<a className={`${prefixCls}-action action-remove`} onClick={this.onCancel.bind(this)} title={i18n[locale].remove}>
<Icon name="shanchu" />
</a>
</label>
Expand Down
8 changes: 7 additions & 1 deletion src/FileList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default class FileList extends React.Component {
};

static propTypes = {
prefixCls: PropTypes.string,
locale: PropTypes.string,
mode: PropTypes.string,
isVisual: PropTypes.bool,
Expand Down Expand Up @@ -89,6 +90,7 @@ export default class FileList extends React.Component {
arr.push(
<DefaultFileItem
file={file}
prefixCls={this.props.prefixCls}
locale={this.props.locale}
key={index}
mode={this.props.mode}
Expand All @@ -109,6 +111,7 @@ export default class FileList extends React.Component {
if ([Status.CANCELLED, Status.SUCCESS, Status.QUEUED].indexOf(file.status) === -1) {
arr.push(
<FileItem
prefixCls={this.props.prefixCls}
locale={this.props.locale}
key={file.id}
file={file}
Expand All @@ -123,8 +126,11 @@ export default class FileList extends React.Component {
}

render() {

const { prefixCls, mode, isVisual } = this.props;

return (
<div className={`kuma-upload-filelist ${this.props.mode === 'nw' ? 'nwmode' : (this.props.mode === 'mini' ? 'minimode' : 'iconmode')}${this.props.isVisual ? ' filelist-visual' : ''}`}>
<div className={`${prefixCls}-filelist ${mode === 'nw' ? 'nwmode' : (mode === 'mini' ? 'minimode' : 'iconmode')}${isVisual ? ' filelist-visual' : ''}`}>
<div className="inner fn-clear">
{this.renderDefaultFileItems()}
{this.renderFileItems()}
Expand Down
6 changes: 3 additions & 3 deletions src/Picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ export default class Picker extends React.Component {
}

render() {
const { isVisual } = this.props;
const { isVisual, prefixCls } = this.props;
if (isVisual) {
return (<div className="kuma-upload-picker-visual"
return (<div className={`${prefixCls}-picker-visual`}
style={{ overflow: 'hidden' }}
>
{this.props.children}
<Icon name="zengjia1" />
</div>);
}
return <div className="kuma-upload-picker">{this.props.children}</div>;
return <div className={`${prefixCls}-picker`}>{this.props.children}</div>;
}
}

Loading

0 comments on commit 69ed8e3

Please sign in to comment.