frc-ui
Version:
React Web UI
82 lines (81 loc) • 4.05 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import React from 'react';
import ReactDOM from 'react-dom';
import { ChatPermissionEnum, LocalStorageKey } from '../interfaces';
import Icon from '../../icon';
import { Consumer } from '../common/Hoc';
import { isExistedListContainer, createListContainer, getPosElement, listContainer } from '../common/dom';
import { getLocalStorageItem, setLocalStorageItem } from '../common';
let Button = class Button extends React.PureComponent {
constructor(props) {
super(props);
this.onOptionSelected = (shortcutKey) => () => {
this.setState({ shortcutKey });
setLocalStorageItem(LocalStorageKey.shortcutKey, shortcutKey);
this.showListContainer(false);
};
this.showListContainer = (showTabFlag) => {
const { prefix, locale } = this.props;
const options = [
{ code: 'EnterSend', name: locale && locale.EnterSend },
{ code: 'CtrlEnterSend', name: locale && locale.CtrlEnterSend }
];
let container = React.createElement("div", { className: 'hidden' });
if (!isExistedListContainer()) {
createListContainer();
}
if (showTabFlag) {
let ops = options.map((d) => {
return (React.createElement("li", { key: d.code, onMouseDown: this.onOptionSelected(d.code) },
d.name,
d.code === this.state.shortcutKey ? React.createElement(Icon, { type: 'check' }) : ''));
});
const parentRect = getPosElement(this.refs.container);
const style = {};
style.left = parentRect.left - 190 + parentRect.width;
style.top = parentRect.top - 54;
style.width = 190;
if (this.props.channel === 'credBChat') {
style.top = parentRect.top + parentRect.height + 1 - 54 - 24;
}
container = (React.createElement("div", { className: `${prefix}-send-btn-wrap`, style: style },
React.createElement("ul", { className: `${prefix}-send-btn-list` }, ops)));
}
ReactDOM.render(container, listContainer);
};
this.handleIconClick = (event) => {
this.showListContainer(true);
event.stopPropagation();
};
this.handleBlur = () => {
this.showListContainer(false);
};
this.handleClick = (event) => {
event.stopPropagation();
const { onClick } = this.props;
onClick();
};
this.state = {
shortcutKey: getLocalStorageItem(LocalStorageKey.shortcutKey, 'EnterSend')
};
}
render() {
const { prefix, locale, permission } = this.props;
const isAnon = (permission || []).some((p) => p === ChatPermissionEnum.ANONYMOUS_PERM);
const name = locale && (isAnon ? locale.anonSendText : locale.sendText);
const cls = `${prefix}-send-btn`;
return (React.createElement("div", { className: cls, ref: 'container' },
React.createElement("div", { className: `${cls}-content` }, name),
React.createElement("div", { className: `${cls}-icon`, tabIndex: -1 },
React.createElement(Icon, { type: 'down', style: { fontSize: 12 } }))));
}
};
Button = __decorate([
Consumer(['permission'])
], Button);
export default Button;