frc-ui
Version:
React Web UI
100 lines (99 loc) • 4.16 kB
JavaScript
import React from 'react';
import Icon from '../icon';
class Custom extends React.PureComponent {
constructor(props) {
super(props);
this.handleEdit = (event) => {
event.stopPropagation();
const { edit } = this.state;
this.setState({ edit: !edit });
};
this.handleChange = (event) => {
const files = event.target.files;
const { sendFile } = this.props;
if (sendFile) {
sendFile(files);
}
};
this.handleClick = (url) => {
const { onChange } = this.props;
if (onChange) {
onChange(url, this.state.edit);
}
};
this.handleMouseOut = (url) => {
const { onMouseOut } = this.props;
if (onMouseOut) {
onMouseOut(url);
}
};
this.handleMouseOver = (url, index) => {
const { onMouseOver } = this.props;
if (onMouseOver) {
onMouseOver(url, index);
}
};
this.saveRef = (ele) => {
this.file = ele;
};
this.renderDefaultEmo = () => {
const { defaultEmo } = this.props;
let index = 0;
return (defaultEmo || []).map((emo) => {
return (React.createElement("li", { key: 'emo-' + emo },
React.createElement("a", { onMouseOver: this.handleMouseOver.bind(this, emo, index++), onMouseOut: this.handleMouseOut.bind(this, emo), onClick: this.handleClick.bind(this, emo) },
React.createElement("img", { className: 'emo-thumbnail', src: emo + '?width=36' }))));
});
};
this.renderDelete = (url) => {
const { edit } = this.state;
const props = {
className: 'emoji-delete',
onClick: (event) => {
event.stopPropagation();
this.handleClick(url);
}
};
if (edit) {
return (React.createElement("a", Object.assign({}, props),
React.createElement("i", { className: 'icon-font delete' }),
React.createElement(Icon, { type: 'delete' })));
}
return null;
};
this.renderEmo = () => {
const { defaultEmo, emos } = this.props;
let index = defaultEmo ? defaultEmo.length : 0;
return (emos || []).map((emo) => {
return (React.createElement("li", { key: 'emo-' + emo },
React.createElement("a", { onMouseOver: this.handleMouseOver.bind(this, emo, index++), onMouseOut: this.handleMouseOut.bind(this, emo), onClick: this.handleClick.bind(this, emo) },
React.createElement("img", { className: 'emo-thumbnail', src: emo + '?width=36' })),
this.renderDelete(emo)));
});
};
this.renderAdd = () => {
return this.state.edit ? ('') : (React.createElement("li", { key: 'emo-add' },
React.createElement("a", { className: 'file', onClick: (event) => {
event.stopPropagation();
if (this.file)
this.file['value'] = '';
} },
React.createElement(Icon, { type: 'plus' }),
React.createElement("input", { ref: this.saveRef, type: 'file', multiple: true, accept: 'image/gif, image/jpg,image/jpeg,image/png', onChange: this.handleChange }))));
};
this.state = {
edit: false
};
}
render() {
const { locale } = this.props;
const { edit } = this.state;
const pre = 'frc-emoji-custom';
return (React.createElement("div", { className: pre },
this.renderDefaultEmo(),
this.renderEmo(),
this.renderAdd(),
React.createElement("div", { className: `${pre}-edit`, onClick: this.handleEdit }, edit ? locale.back : locale.edit)));
}
}
export default Custom;