@wix/design-system/dist/cjs/RichTextInputArea/Toolbar/RichTextToolbar.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = 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 _system = require("@wix/wix-ui-icons-common/system");
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 _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RichTextInputArea/Toolbar/RichTextToolbar.jsx",
  _this = void 0;
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, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25,
      columnNumber: 3
    }
  }), /*#__PURE__*/_react["default"].createElement(Icon, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 32,
      columnNumber: 5
    }
  }));
};
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, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 3
    }
  }), /*#__PURE__*/_react["default"].createElement(Icon, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 5
    }
  }));
};
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,
    customButtons = _ref3.customButtons;
  return /*#__PURE__*/_react["default"].createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Consumer, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 5
    }
  }, function (_ref4) {
    var texts = _ref4.texts;
    var buttons = [{
      type: _RichTextInputAreaTypes.inlineStyleTypes.bold,
      iconComponent: _system.TextAreaBold,
      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: _system.TextAreaItalic,
      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: _system.TextAreaUnderline,
      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: _system.TextAreaLink,
      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: _system.TextAreaBulletList,
      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: _system.TextAreaNumberedList,
      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,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 182,
        columnNumber: 11
      }
    }, buttons.map(function (_ref5, index) {
      var render = _ref5.render,
        props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded3);
      return render(index, props);
    }), customButtons && customButtons.map(function (_ref6, index) {
      var tooltipText = _ref6.tooltipText,
        icon = _ref6.icon,
        onClick = _ref6.onClick,
        disabled = _ref6.disabled,
        active = _ref6.active,
        buttonDataHook = _ref6.dataHook;
      return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarButton["default"], {
        key: buttonDataHook || index,
        dataHook: buttonDataHook,
        tooltipText: tooltipText,
        isDisabled: isDisabled || disabled,
        isActive: active,
        onClick: onClick,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 197,
          columnNumber: 19
        }
      }, icon);
    }));
  });
};
var _default = exports["default"] = RichTextToolbar;