@edtr-io/plugin-text/dist/controls/colors.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColoredTextIcon = exports.ColorControls = void 0;

var React = _interopRequireWildcard(require("react"));

var _index = require("./index");

var _button = require("../toolbar/button");

var _colors = require("../plugins/colors");

var _ui = require("@edtr-io/ui");

var _pluginText = require("@edtr-io/plugin-text");

var _editorUi = require("@edtr-io/editor-ui");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

var ColorControls = function ColorControls(props) {
  var theme = (0, _ui.usePluginTheme)(props.name, _pluginText.textPluginThemeFactory);
  var _theme$plugins$colors = theme.plugins.colors,
      colors = _theme$plugins$colors.colors,
      defaultColor = _theme$plugins$colors.defaultColor;
  return React.createElement(React.Fragment, null, React.createElement(_button.Button, {
    active: !(0, _colors.createIsColor)()(props.editor),
    name: props.name,
    onClick: function onClick() {
      (0, _colors.removeColor)(props.editor).moveToEnd().focus();
      props.switchControls(_index.VisibleControls.All);
      props.onChange(props.editor);
    },
    title: "Farbe zur\xFCcksetzen"
  }, React.createElement(ColorPaletteIcon, {
    color: defaultColor
  })), colors.map(function (color, index) {
    return React.createElement(_button.Button, {
      key: index,
      active: (0, _colors.createIsColor)(index)(props.editor),
      name: props.name,
      onClick: function onClick() {
        (0, _pluginText.trimSelection)(props.editor);
        (0, _colors.createToggleColor)(index)(props.editor).moveToEnd().focus();
        props.switchControls(_index.VisibleControls.All);
        props.onChange(props.editor);
      },
      title: "Einf\xE4rben"
    }, React.createElement(ColorPaletteIcon, {
      color: color
    }));
  }), React.createElement(_button.Button, {
    name: props.name,
    onClick: function onClick() {
      return props.switchControls(_index.VisibleControls.All);
    },
    title: "Untermen\xFC schlie\xDFen"
  }, React.createElement(_editorUi.EdtrIcon, {
    icon: _editorUi.edtrTextControls.close
  })));
};

exports.ColorControls = ColorControls;

var ColorPaletteIcon = _ui.styled.div(function (props) {
  return {
    display: 'inline-block',
    backgroundColor: props.color,
    borderRadius: ' 100%',
    width: '19px',
    height: '19px',
    margin: '3px',
    verticalAlign: 'middle'
  };
});

var ColoredText = _ui.styled.span({
  position: 'relative',
  verticalAlign: 'middle',
  display: 'inline-block'
});

var FlexContainer = _ui.styled.span({
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column'
});

var Line = _ui.styled.span(function (props) {
  var theme = (0, _pluginText.createTextPluginTheme)(name, props.theme);
  var _theme$plugins$colors2 = theme.plugins.colors,
      colors = _theme$plugins$colors2.colors,
      defaultColor = _theme$plugins$colors2.defaultColor;
  return {
    border: "2px solid ".concat(props.index === undefined ? defaultColor : colors[props.index % colors.length]),
    borderRadius: '4px',
    bottom: '0',
    width: '80%',
    position: 'absolute'
  };
});

var ColoredTextIcon = function ColoredTextIcon(props) {
  return React.createElement(ColoredText, null, React.createElement(FlexContainer, null, React.createElement(_editorUi.EdtrIcon, {
    icon: _editorUi.edtrTextControls.colorText
  }), React.createElement(Line, {
    index: props.index
  })));
};

exports.ColoredTextIcon = ColoredTextIcon;
//# sourceMappingURL=colors.js.map