wix-style-react/dist/src/RichTextInputArea/Toolbar/RichTextToolbar.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _TextAreaBold = _interopRequireDefault(require("wix-ui-icons-common/system/TextAreaBold"));

var _TextAreaItalic = _interopRequireDefault(require("wix-ui-icons-common/system/TextAreaItalic"));

var _TextAreaUnderline = _interopRequireDefault(require("wix-ui-icons-common/system/TextAreaUnderline"));

var _TextAreaLink = _interopRequireDefault(require("wix-ui-icons-common/system/TextAreaLink"));

var _TextAreaBulletList = _interopRequireDefault(require("wix-ui-icons-common/system/TextAreaBulletList"));

var _TextAreaNumberedList = _interopRequireDefault(require("wix-ui-icons-common/system/TextAreaNumberedList"));

var _RichTextToolbarButton = _interopRequireDefault(require("./RichTextToolbarButton"));

var _RichTextToolbarLinkButton = _interopRequireDefault(require("./RichTextToolbarLinkButton"));

var _RichTextInputAreaContext = require("../RichTextInputAreaContext");

var _EditorUtilities = _interopRequireDefault(require("../EditorUtilities"));

var _RichTextInputAreaTypes = require("../RichTextInputAreaTypes");

var _excluded = ["type", "iconComponent", "isDisabled", "isActive"],
    _excluded2 = ["type", "iconComponent", "isDisabled", "isActive"],
    _excluded3 = ["render"];

var renderButton = function renderButton(index, _ref) {
  var type = _ref.type,
      Icon = _ref.iconComponent,
      isDisabled = _ref.isDisabled,
      isActive = _ref.isActive,
      restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarButton["default"], (0, _extends2["default"])({
    key: "".concat(index, "-").concat(type),
    dataHook: "richtextarea-button-".concat(type.toLowerCase()),
    isDisabled: isDisabled,
    isActive: !isDisabled && isActive()
  }, restProps), /*#__PURE__*/_react["default"].createElement(Icon, null));
};

var renderLinkButton = function renderLinkButton(index, _ref2) {
  var type = _ref2.type,
      Icon = _ref2.iconComponent,
      isDisabled = _ref2.isDisabled,
      isActive = _ref2.isActive,
      restProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
  return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarLinkButton["default"], (0, _extends2["default"])({
    key: "".concat(index, "-").concat(type),
    dataHook: "richtextarea-button-".concat(type.toLowerCase()),
    isDisabled: isDisabled,
    isActive: !isDisabled && isActive()
  }, restProps), /*#__PURE__*/_react["default"].createElement(Icon, null));
};

var RichTextToolbar = function RichTextToolbar(_ref3) {
  var dataHook = _ref3.dataHook,
      className = _ref3.className,
      isDisabled = _ref3.isDisabled,
      editorState = _ref3.editorState,
      onBold = _ref3.onBold,
      onItalic = _ref3.onItalic,
      onUnderline = _ref3.onUnderline,
      onLink = _ref3.onLink,
      onBulletedList = _ref3.onBulletedList,
      onNumberedList = _ref3.onNumberedList;
  return /*#__PURE__*/_react["default"].createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Consumer, null, function (_ref4) {
    var texts = _ref4.texts;
    var buttons = [{
      type: _RichTextInputAreaTypes.inlineStyleTypes.bold,
      iconComponent: _TextAreaBold["default"],
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.bold);
      },
      tooltipText: texts.toolbarButtons.boldButtonLabel,
      onClick: function onClick() {
        return onBold(_EditorUtilities["default"].toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.bold));
      }
    }, {
      type: _RichTextInputAreaTypes.inlineStyleTypes.italic,
      iconComponent: _TextAreaItalic["default"],
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.italic);
      },
      tooltipText: texts.toolbarButtons.italicButtonLabel,
      onClick: function onClick() {
        return onItalic(_EditorUtilities["default"].toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.italic));
      }
    }, {
      type: _RichTextInputAreaTypes.inlineStyleTypes.underline,
      iconComponent: _TextAreaUnderline["default"],
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.underline);
      },
      tooltipText: texts.toolbarButtons.underlineButtonLabel,
      onClick: function onClick() {
        return onUnderline(_EditorUtilities["default"].toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.underline));
      }
    }, {
      type: _RichTextInputAreaTypes.entityTypes.link,
      iconComponent: _TextAreaLink["default"],
      render: function render(index, buttonProps) {
        return renderLinkButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasEntity(editorState, _RichTextInputAreaTypes.entityTypes.link);
      },
      tooltipText: texts.toolbarButtons.linkButtonLabel,
      // The data which is passed and being used within the insertion form
      data: {
        selectedText: _EditorUtilities["default"].getSelectedText(editorState),
        hasRemovableEntityInSelection: _EditorUtilities["default"].hasRemovableEntityInSelection(editorState)
      },
      onSubmit: function onSubmit(event, linkData) {
        onLink(_EditorUtilities["default"].toggleLink(editorState, linkData));
      },
      onRemove: function onRemove() {
        onLink(_EditorUtilities["default"].toggleLink(editorState));
      }
    }, {
      type: _RichTextInputAreaTypes.blockTypes.bulletedList,
      iconComponent: _TextAreaBulletList["default"],
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasBlockType(editorState, _RichTextInputAreaTypes.blockTypes.bulletedList);
      },
      tooltipText: texts.toolbarButtons.bulletedListButtonLabel,
      onClick: function onClick() {
        return onBulletedList(_EditorUtilities["default"].toggleBlockType(editorState, _RichTextInputAreaTypes.blockTypes.bulletedList));
      }
    }, {
      type: _RichTextInputAreaTypes.blockTypes.numberedList,
      iconComponent: _TextAreaNumberedList["default"],
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasBlockType(editorState, _RichTextInputAreaTypes.blockTypes.numberedList);
      },
      tooltipText: texts.toolbarButtons.numberedListButtonLabel,
      onClick: function onClick() {
        return onNumberedList(_EditorUtilities["default"].toggleBlockType(editorState, _RichTextInputAreaTypes.blockTypes.numberedList));
      }
    }];
    return /*#__PURE__*/_react["default"].createElement("div", {
      "data-hook": dataHook,
      className: className
    }, buttons.map(function (_ref5, index) {
      var render = _ref5.render,
          props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded3);
      return render(index, props);
    }));
  });
};

var _default = RichTextToolbar;
exports["default"] = _default;