103 lines
3.3 KiB
JavaScript
103 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import { Button, Icon, message } from 'antd';
|
|
import { WeaLocaleProvider, WeaDialog, WeaInput, WeaInputSearch } from 'ecCom';
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
import MaterialLib from './MaterialLib';
|
|
|
|
class WeaMaterialLib extends React.Component {
|
|
state = { visible: false, value: this.props.value };
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.getButtons = this.getButtons.bind(this);
|
|
this.onOk = this.onOk.bind(this);
|
|
this.onClear = this.onClear.bind(this);
|
|
this.onCancel = this.onCancel.bind(this);
|
|
this.onShow = this.onShow.bind(this);
|
|
this.onChange = this.onChange.bind(this);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
this.setState({ value: nextProps.value });
|
|
}
|
|
|
|
render() {
|
|
const { type, value, disabled, multiCheck, getTooltipContainer = () => document.body } = this.props;
|
|
const { visible } = this.state;
|
|
|
|
let displayComp = <div />;
|
|
if (type == 'button') {
|
|
displayComp = <div onClick={this.onShow}>{this.props.children}</div>;
|
|
} else {
|
|
displayComp = <WeaInputSearch style={{ width: '100%' }} value={value} onSearchChange={this.onChange} onSearch={this.onShow} />;
|
|
}
|
|
|
|
if (disabled) {
|
|
displayComp = <WeaInput value={value} disabled={true} />;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{displayComp}
|
|
<WeaDialog
|
|
visible={visible}
|
|
title={getLabel(0, '图片素材库')}
|
|
icon="icon-coms-portal"
|
|
iconBgcolor="#1a57a0"
|
|
style={{ width: top.document.body.clientWidth - 300, height: top.document.body.clientHeight - 200 }}
|
|
zIndex={1050}
|
|
buttons={this.getButtons()}
|
|
onCancel={this.onCancel}
|
|
layout={getTooltipContainer()}
|
|
>
|
|
<MaterialLib ref="ml" multiCheck={multiCheck} />
|
|
</WeaDialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
getButtons() {
|
|
let buttons = [];
|
|
buttons.push(<Button type="primary" onClick={this.onOk}>{getLabel(0, '确定')}</Button>);
|
|
buttons.push(<Button type="primary" onClick={this.onClear}>{getLabel(0, '清除')}</Button>);
|
|
buttons.push(<Button type="ghost" onClick={this.onCancel}>{getLabel(0, '取消')}</Button>);
|
|
return buttons;
|
|
}
|
|
|
|
onShow() {
|
|
this.setState({ visible: true });
|
|
this.refs.ml && this.refs.ml.setVisible({ visible: true });
|
|
}
|
|
|
|
onOk() {
|
|
const checkedFiles = this.refs.ml.getCheckedFiles();
|
|
|
|
if (checkedFiles && checkedFiles.length) {
|
|
const filepaths = checkedFiles.map(item => item.filepath);
|
|
this.onChange(filepaths.join(','));
|
|
this.refs.ml.setVisible(false);
|
|
this.setState({ visible: false });
|
|
} else {
|
|
message.warning(getLabel(0, '请选择！'));
|
|
}
|
|
}
|
|
|
|
onClear() {
|
|
this.refs.ml.setVisible(false);
|
|
this.setState({ visible: false, value: '' });
|
|
this.props.onChange('');
|
|
}
|
|
|
|
onCancel() {
|
|
this.refs.ml.setVisible(false);
|
|
this.setState({ visible: false });
|
|
}
|
|
|
|
onChange(value) {
|
|
this.props.onChange(value);
|
|
}
|
|
}
|
|
|
|
export default WeaMaterialLib;
|