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

wix-style-react

"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/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/RichTextInputArea/Toolbar/RichTextToolbar.js";
var renderButton = (index, _ref) => {
  var {
      type,
      iconComponent: Icon,
      isDisabled,
      isActive
    } = _ref,
    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: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25,
      columnNumber: 3
    }
  }), /*#__PURE__*/_react.default.createElement(Icon, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 32,
      columnNumber: 5
    }
  }));
};
var renderLinkButton = (index, _ref2) => {
  var {
      type,
      iconComponent: Icon,
      isDisabled,
      isActive
    } = _ref2,
    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: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 3
    }
  }), /*#__PURE__*/_react.default.createElement(Icon, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 5
    }
  }));
};
var RichTextToolbar = _ref3 => {
  var {
    dataHook,
    className,
    isDisabled,
    editorState,
    onBold,
    onItalic,
    onUnderline,
    onLink,
    onBulletedList,
    onNumberedList
  } = _ref3;
  return /*#__PURE__*/_react.default.createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Consumer, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64,
      columnNumber: 5
    }
  }, _ref4 => {
    var {
      texts
    } = _ref4;
    var buttons = [{
      type: _RichTextInputAreaTypes.inlineStyleTypes.bold,
      iconComponent: _system.TextAreaBold,
      render: (index, buttonProps) => renderButton(index, buttonProps),
      isDisabled,
      isActive: () => _EditorUtilities.default.isEditorFocused(editorState) && _EditorUtilities.default.hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.bold),
      tooltipText: texts.toolbarButtons.boldButtonLabel,
      onClick: () => onBold(_EditorUtilities.default.toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.bold))
    }, {
      type: _RichTextInputAreaTypes.inlineStyleTypes.italic,
      iconComponent: _system.TextAreaItalic,
      render: (index, buttonProps) => renderButton(index, buttonProps),
      isDisabled,
      isActive: () => _EditorUtilities.default.isEditorFocused(editorState) && _EditorUtilities.default.hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.italic),
      tooltipText: texts.toolbarButtons.italicButtonLabel,
      onClick: () => onItalic(_EditorUtilities.default.toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.italic))
    }, {
      type: _RichTextInputAreaTypes.inlineStyleTypes.underline,
      iconComponent: _system.TextAreaUnderline,
      render: (index, buttonProps) => renderButton(index, buttonProps),
      isDisabled,
      isActive: () => _EditorUtilities.default.isEditorFocused(editorState) && _EditorUtilities.default.hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.underline),
      tooltipText: texts.toolbarButtons.underlineButtonLabel,
      onClick: () => onUnderline(_EditorUtilities.default.toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.underline))
    }, {
      type: _RichTextInputAreaTypes.entityTypes.link,
      iconComponent: _system.TextAreaLink,
      render: (index, buttonProps) => renderLinkButton(index, buttonProps),
      isDisabled,
      isActive: () => _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: (event, linkData) => {
        onLink(_EditorUtilities.default.toggleLink(editorState, linkData));
      },
      onRemove: () => {
        onLink(_EditorUtilities.default.toggleLink(editorState));
      }
    }, {
      type: _RichTextInputAreaTypes.blockTypes.bulletedList,
      iconComponent: _system.TextAreaBulletList,
      render: (index, buttonProps) => renderButton(index, buttonProps),
      isDisabled,
      isActive: () => _EditorUtilities.default.isEditorFocused(editorState) && _EditorUtilities.default.hasBlockType(editorState, _RichTextInputAreaTypes.blockTypes.bulletedList),
      tooltipText: texts.toolbarButtons.bulletedListButtonLabel,
      onClick: () => onBulletedList(_EditorUtilities.default.toggleBlockType(editorState, _RichTextInputAreaTypes.blockTypes.bulletedList))
    }, {
      type: _RichTextInputAreaTypes.blockTypes.numberedList,
      iconComponent: _system.TextAreaNumberedList,
      render: (index, buttonProps) => renderButton(index, buttonProps),
      isDisabled,
      isActive: () => _EditorUtilities.default.isEditorFocused(editorState) && _EditorUtilities.default.hasBlockType(editorState, _RichTextInputAreaTypes.blockTypes.numberedList),
      tooltipText: texts.toolbarButtons.numberedListButtonLabel,
      onClick: () => onNumberedList(_EditorUtilities.default.toggleBlockType(editorState, _RichTextInputAreaTypes.blockTypes.numberedList))
    }];
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": dataHook,
      className: className,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 181,
        columnNumber: 11
      }
    }, buttons.map((_ref5, index) => {
      var {
          render
        } = _ref5,
        props = (0, _objectWithoutProperties2.default)(_ref5, _excluded3);
      return render(index, props);
    }));
  });
};
var _default = exports.default = RichTextToolbar;
//# sourceMappingURL=RichTextToolbar.js.map