@atlaskit/editor-plugin-rule/dist/cjs/ui/DividerOptions.js

Rule plugin for @atlaskit/editor-core

/* DividerOptions.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DividerOptions = void 0;
require("./DividerOptions.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
var _rule = require("@atlaskit/editor-common/messages/rule");
var _ReactEditorViewContext = _interopRequireDefault(require("@atlaskit/editor-common/ui-react/ReactEditorViewContext"));
var _strokeWeightLarge = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-large"));
var _strokeWeightMedium = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-medium"));
var _strokeWeightSmall = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-small"));
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _box = require("@atlaskit/primitives/compiled/box");
var _text = require("@atlaskit/primitives/compiled/text");
var _constants = require("./constants");
var _DashedStrokeIcon = require("./icons/DashedStrokeIcon");
var _DottedStrokeIcon = require("./icons/DottedStrokeIcon");
var _FadeStrokeIcon = require("./icons/FadeStrokeIcon");
var _SketchStrokeIcon = require("./icons/SketchStrokeIcon");
var _SolidStrokeIcon = require("./icons/SolidStrokeIcon");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var styles = {
  container: "_18zrutpp _4t3i5jys",
  section: "_1rjc1b66",
  dividerOptionsContainer: "_zulpu2gc _1e0c1txw _1bsb1osq",
  dividerOptionsButtonContainer: "_1rjc1b66"
};
var dividerOptionsButtonStyles = null;
var dividerOptionsButtonStylesOld = null;
var SmallWeightIcon = function SmallWeightIcon(iconProps) {
  return /*#__PURE__*/_react.default.createElement(_strokeWeightSmall.default, {
    color: "var(--ds-icon-subtle, #505258)",
    label: iconProps.label
  });
};
var MediumWeightIcon = function MediumWeightIcon(iconProps) {
  return /*#__PURE__*/_react.default.createElement(_strokeWeightMedium.default, {
    color: "var(--ds-icon-subtle, #505258)",
    label: iconProps.label
  });
};
var LargeWeightIcon = function LargeWeightIcon(iconProps) {
  return /*#__PURE__*/_react.default.createElement(_strokeWeightLarge.default, {
    color: "var(--ds-icon-subtle, #505258)",
    label: iconProps.label
  });
};
var weightOptions = [{
  icon: SmallWeightIcon,
  label: _rule.ruleMessages.smallDivider,
  value: 1
}, {
  icon: MediumWeightIcon,
  label: _rule.ruleMessages.mediumDivider,
  value: 2
}, {
  icon: LargeWeightIcon,
  label: _rule.ruleMessages.largeDivider,
  value: 3
}];
var styleOptionRows = [
// row 1
[{
  icon: _SolidStrokeIcon.SolidStrokeIcon,
  label: _rule.ruleMessages.solidDivider,
  value: 'solid'
}, {
  icon: _DashedStrokeIcon.DashedStrokeIcon,
  label: _rule.ruleMessages.dashedDivider,
  value: 'dashed'
}, {
  icon: _DottedStrokeIcon.DottedStrokeIcon,
  label: _rule.ruleMessages.dottedDivider,
  value: 'dotted'
}],
// row 2
[{
  icon: _SketchStrokeIcon.SketchStrokeIcon,
  label: _rule.ruleMessages.sketchDivider,
  value: 'sketch'
}, {
  icon: _FadeStrokeIcon.FadeStrokeIcon,
  label: _rule.ruleMessages.fadeDivider,
  value: 'fade'
}]];
var DividerOptionButton = function DividerOptionButton(_ref) {
  var autoFocus = _ref.autoFocus,
    icon = _ref.icon,
    isSelected = _ref.isSelected,
    label = _ref.label,
    onKeyDownCapture = _ref.onKeyDownCapture,
    onSelect = _ref.onSelect,
    value = _ref.value;
  var handleClick = (0, _react.useCallback)(function () {
    return onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
  }, [onSelect, value]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)(["_2rko1mok _16jlkb7n _1vy41mok _ug5l1h6o _r55q1osq", !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_dividers_patch_1') && "_1reo15vq _18m915vq"])
  }, /*#__PURE__*/_react.default.createElement(_button.default, {
    autoFocus: autoFocus,
    icon: icon,
    isSelected: isSelected,
    label: label,
    onClick: handleClick,
    onKeyDownCapture: onKeyDownCapture
  }));
};
var DividerOptions = exports.DividerOptions = function DividerOptions(_ref2) {
  var onStyleChange = _ref2.onStyleChange,
    onWeightChange = _ref2.onWeightChange,
    style = _ref2.style,
    weight = _ref2.weight;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var _useContext = (0, _react.useContext)(_ReactEditorViewContext.default),
    popupsMountPoint = _useContext.popupsMountPoint;
  var containerRef = (0, _react.useRef)(null);
  var handleKeyDown = (0, _react.useCallback)(function (event) {
    var _containerRef$current, _containerRef$current2, _buttons$nextIndex;
    var buttons = Array.from((_containerRef$current = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.querySelectorAll('button')) !== null && _containerRef$current !== void 0 ? _containerRef$current : []);
    var index = buttons.indexOf(event.currentTarget);
    if (index === -1) {
      return;
    }
    var columns = weightOptions.length;
    var row = Math.floor(index / columns);
    var column = index % columns;
    var rows = [weightOptions].concat(styleOptionRows);
    var nextIndex;
    switch (event.key) {
      case 'ArrowDown':
      case 'ArrowUp':
        {
          var nextRow = (row + (event.key === 'ArrowDown' ? 1 : -1) + rows.length) % rows.length;
          nextIndex = nextRow * columns + Math.min(column, rows[nextRow].length - 1);
          break;
        }
      case 'ArrowRight':
        nextIndex = (index + 1) % buttons.length;
        break;
      case 'ArrowLeft':
        nextIndex = (index - 1 + buttons.length) % buttons.length;
        break;
      default:
        return;
    }
    event.preventDefault();
    event.stopPropagation();
    (_buttons$nextIndex = buttons[nextIndex]) === null || _buttons$nextIndex === void 0 || _buttons$nextIndex.focus();
  }, []);
  var selectedStyle = style !== null && style !== void 0 ? style : _constants.DEFAULT_DIVIDER_STYLE;
  var selectedWeight = weight !== null && weight !== void 0 ? weight : _constants.DEFAULT_DIVIDER_WEIGHT;
  var isPatchEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_dividers_patch_1');
  return /*#__PURE__*/_react.default.createElement(_box.Box, {
    xcss: styles.container,
    ref: isPatchEnabled ? containerRef : undefined,
    role: isPatchEnabled ? 'group' : undefined,
    "aria-label": isPatchEnabled ? formatMessage(_rule.ruleMessages.dividerOptions) : undefined
  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
    xcss: styles.section
  }, /*#__PURE__*/_react.default.createElement(_text.Text, {
    weight: "bold",
    color: "color.text.subtle"
  }, formatMessage(_rule.ruleMessages.weight)), /*#__PURE__*/_react.default.createElement(_box.Box, {
    xcss: styles.dividerOptionsButtonContainer
  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
    xcss: styles.dividerOptionsContainer
  }, weightOptions.map(function (_ref3) {
    var icon = _ref3.icon,
      label = _ref3.label,
      value = _ref3.value;
    return /*#__PURE__*/_react.default.createElement(DividerOptionButton, {
      key: value,
      autoFocus:
      // when there is no custom mount point, Dropdown sends ArrowDown
      // on keyboard open so autofocusing is not required.
      isPatchEnabled && Boolean(popupsMountPoint) && value === weightOptions[0].value,
      icon: icon,
      isSelected: selectedWeight === value,
      label: formatMessage(label),
      onKeyDownCapture: isPatchEnabled ? handleKeyDown : undefined,
      onSelect: onWeightChange,
      value: value
    });
  })))), /*#__PURE__*/_react.default.createElement(_box.Box, {
    xcss: styles.section
  }, /*#__PURE__*/_react.default.createElement(_text.Text, {
    weight: "bold",
    color: "color.text.subtle"
  }, formatMessage(_rule.ruleMessages.style)), styleOptionRows.map(function (options) {
    return /*#__PURE__*/_react.default.createElement(_box.Box, {
      key: options[0].value,
      xcss: styles.dividerOptionsButtonContainer
    }, /*#__PURE__*/_react.default.createElement(_box.Box, {
      xcss: styles.dividerOptionsContainer
    }, options.map(function (_ref4) {
      var icon = _ref4.icon,
        label = _ref4.label,
        value = _ref4.value;
      return /*#__PURE__*/_react.default.createElement(DividerOptionButton, {
        key: value,
        icon: icon,
        isSelected: selectedStyle === value,
        label: formatMessage(label),
        onKeyDownCapture: isPatchEnabled ? handleKeyDown : undefined,
        onSelect: onStyleChange,
        value: value
      });
    })));
  })));
};