react-img-editor-en
Version:
Image Annotation Tool for React
83 lines (82 loc) • 4.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Toolbar;
var _ParamSetting = _interopRequireDefault(require("./ParamSetting"));
var _react = _interopRequireWildcard(require("react"));
var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
var _constants = require("../common/constants");
var _EditorContext = require("./EditorContext");
require("rc-tooltip/assets/bootstrap_white.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function Toolbar() {
var _useContext = (0, _react.useContext)(_EditorContext.EditorContext),
containerWidth = _useContext.containerWidth,
plugins = _useContext.plugins,
toolbar = _useContext.toolbar,
currentPlugin = _useContext.currentPlugin,
paramValue = _useContext.paramValue,
handlePluginChange = _useContext.handlePluginChange,
handlePluginParamValueChange = _useContext.handlePluginParamValueChange,
toolbarItemConfig = _useContext.toolbarItemConfig;
var style = {
width: containerWidth
};
function renderPlugin(plugin) {
var isActivated = !!(currentPlugin && currentPlugin.name === plugin.name);
var paramNames = currentPlugin ? currentPlugin.params : [];
var isDisabled = toolbarItemConfig[plugin.name].disable;
if (!paramNames || paramNames.length === 0) {
return _react["default"].createElement("span", {
key: plugin.name,
className: "".concat(_constants.prefixCls, "-toolbar-icon ").concat(isActivated ? 'activated' : '', " ").concat(isDisabled ? 'disabled' : '')
}, _react["default"].createElement("i", {
title: plugin.title,
className: plugin.iconfont,
onClick: function onClick() {
return handlePluginChange(plugin);
}
}));
}
return _react["default"].createElement(_rcTooltip["default"], {
key: plugin.name,
placement: "bottom",
overlay: _react["default"].createElement(_ParamSetting["default"], {
paramNames: paramNames,
paramValue: paramValue,
onChange: handlePluginParamValueChange
}),
visible: isActivated,
overlayClassName: "".concat(_constants.prefixCls, "-tooltip"),
arrowContent: _react["default"].createElement("div", {
className: "rc-tooltip-arrow-inner"
})
}, _react["default"].createElement("span", {
key: plugin.name,
className: "".concat(_constants.prefixCls, "-toolbar-icon ").concat(isActivated ? 'activated' : '', " ").concat(isDisabled ? 'disabled' : '')
}, _react["default"].createElement("i", {
title: plugin.title,
className: plugin.iconfont,
onClick: function onClick() {
return handlePluginChange(plugin);
}
})));
}
return _react["default"].createElement("div", {
className: "".concat(_constants.prefixCls, "-toolbar"),
style: style
}, toolbar.items.map(function (item) {
if (item === '|') return _react["default"].createElement("span", {
className: "".concat(_constants.prefixCls, "-toolbar-separator")
});
for (var i = 0; i < plugins.length; i++) {
if (plugins[i].name === item) {
return renderPlugin(plugins[i]);
}
}
return null;
}));
}