@cc98/react-ubb-editor
Version:
A ubb editor component based on react
77 lines (76 loc) • 4.13 kB
JavaScript
import { __extends } from "tslib";
import { faRedo, faUndo, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { withConfig } from '../context';
import createAction from '../createAction';
import { ConfigType } from '../types';
import Button from './styles/Button';
import ButtonContainer from './styles/ButtonContainer';
import ButtonRoot from './styles/ButtonRoot';
var Buttons = /** @class */ (function (_super) {
__extends(Buttons, _super);
function Buttons() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handlerMap = {};
_this.renderContent = function (config) {
return (React.createElement("span", null,
config.label,
config.icon ? React.createElement(Icon, { icon: config.icon, size: "lg" }) : null));
};
_this.generateHandleButtonClick = function (config) {
var handler = _this.handlerMap[config.tagName];
if (handler)
return handler;
switch (config.type) {
case ConfigType.Button:
handler = function () { return _this.props.dispatch(createAction(config)); };
break;
case ConfigType.Extend:
handler = function () { return _this.props.onExtendButtonClick(config.tagName); };
break;
case ConfigType.Custom:
handler = function () { return _this.props.onCustomButtonClick(config.tagName); };
break;
}
_this.handlerMap[config.tagName] = handler;
return handler;
};
_this.renderCustom = function (config) {
var _a = _this.props, customTagName = _a.customTagName, dispatch = _a.dispatch, message = _a.message;
var Component = config.Component;
return (React.createElement("div", { style: {
position: 'absolute',
display: customTagName === config.tagName ? '' : 'none',
} },
React.createElement(Component, { dispatch: dispatch, message: message })));
};
return _this;
}
Buttons.prototype.render = function () {
var _this = this;
var _a = this.props, config = _a.config, isPreviewing = _a.isPreviewing;
var buttonConfigs = config.configs, UbbContainer = config.UbbContainer;
return (React.createElement(ButtonRoot, null,
React.createElement(ButtonRoot, null, Object.keys(buttonConfigs)
.map(function (item) { return buttonConfigs[item]; })
.map(function (item) { return (React.createElement(ButtonContainer, { index: item.index, key: item.tagName },
React.createElement(Button, { style: { background: 'white' }, disabled: isPreviewing, title: item.title, onClick: _this.generateHandleButtonClick(item) }, _this.renderContent(item)),
(item.type === ConfigType.Custom ||
(item.type === ConfigType.Extend && !!item.Component)) &&
_this.renderCustom(item))); })),
React.createElement("div", { style: { flexGrow: 1 } }),
React.createElement(ButtonContainer, null,
React.createElement(Button, { title: "\u64A4\u9500", onClick: this.props.undo },
React.createElement(Icon, { icon: faUndo }))),
React.createElement(ButtonContainer, null,
React.createElement(Button, { title: "\u91CD\u505A", onClick: this.props.redo },
React.createElement(Icon, { icon: faRedo }))),
UbbContainer && (React.createElement(ButtonContainer, null,
React.createElement(Button, { title: "\u9884\u89C8", onClick: this.props.changePreviewing },
React.createElement(Icon, { icon: faWindowMaximize }))))));
};
return Buttons;
}(React.PureComponent));
export { Buttons };
export default withConfig(Buttons);