frc-ui
Version:
React Web UI
76 lines (75 loc) • 2.98 kB
JavaScript
import React from 'react';
import classNames from 'classnames';
import Icon from '../icon';
import Cover from '../cover';
import Custom from './Custom';
import EmojiOne from './EmojiOne';
var Tab;
(function (Tab) {
Tab["EMOJI"] = "emoji";
Tab["CUSTOM"] = "custom";
})(Tab || (Tab = {}));
class Tabs extends React.PureComponent {
constructor(props) {
super(props);
this.handleChange = (tab) => (event) => {
event.stopPropagation();
this.setState({ tab });
};
this.handleHidden = (event) => {
const { onHide } = this.props;
event.stopPropagation();
if (onHide)
onHide();
};
this.handleSendFile = (files) => {
const { collectEmo, messageKey } = this.props;
if (collectEmo)
collectEmo({
key: messageKey,
files
});
};
this.handleClick = (emo) => {
const { onChange } = this.props;
if (onChange)
onChange(emo);
};
this.handleStop = (event) => {
event.stopPropagation();
};
this.renderChildren = () => {
const { locale, customEmo, defaultEmo } = this.props;
const { tab } = this.state;
switch (tab) {
case Tab.CUSTOM:
return (React.createElement(Custom, { emos: customEmo || [], defaultEmo: defaultEmo || [], locale: locale || { back: '返回', edit: '编辑' }, sendFile: this.handleSendFile, onChange: (url, isDelete) => this.handleClick({ emo: url, type: 'collectEmo', isDelete }) }));
default:
return React.createElement(EmojiOne, { onChange: this.handleClick });
}
};
this.state = {
tab: Tab.EMOJI
};
}
render() {
const { tab } = this.state;
const { show, x, y } = this.props;
const pre = 'frc-emoji-tabs';
return (React.createElement(Cover, { show: show, onClick: this.handleHidden },
React.createElement("div", { className: pre, style: { top: y ? y - 312 - 2 : 0, left: x || 0 }, onClick: this.handleStop },
this.renderChildren(),
React.createElement("div", { className: `${pre}-bottom` },
React.createElement("div", { className: classNames(`${pre}-tab`, { [`${pre}-tab-selected`]: tab === Tab.EMOJI }), onClick: this.handleChange(Tab.EMOJI) },
React.createElement(Icon, { type: 'smile-o' })),
React.createElement("div", { className: classNames(`${pre}-tab`, { [`${pre}-tab-selected`]: tab === Tab.CUSTOM }), onClick: this.handleChange(Tab.CUSTOM) },
React.createElement(Icon, { type: 'star' }))))));
}
}
Tabs.defaultProps = {
locale: {
back: '返回',
edit: '编辑'
}
};
export default Tabs;