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

Rule plugin for @atlaskit/editor-core

/* DividerOptions.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./DividerOptions.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useContext, useRef } from 'react';
import { useIntl } from 'react-intl';
import IconButton from '@atlaskit/button/icon/button';
import { ruleMessages as messages } from '@atlaskit/editor-common/messages/rule';
import ReactEditorViewContext from '@atlaskit/editor-common/ui-react/ReactEditorViewContext';
import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
import StrokeWeightMediumIcon from '@atlaskit/icon/core/stroke-weight-medium';
import StrokeWeightSmallIcon from '@atlaskit/icon/core/stroke-weight-small';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { Box } from '@atlaskit/primitives/compiled/box';
import { Text } from '@atlaskit/primitives/compiled/text';
import { DEFAULT_DIVIDER_STYLE, DEFAULT_DIVIDER_WEIGHT } from './constants';
import { DashedStrokeIcon } from './icons/DashedStrokeIcon';
import { DottedStrokeIcon } from './icons/DottedStrokeIcon';
import { FadeStrokeIcon } from './icons/FadeStrokeIcon';
import { SketchStrokeIcon } from './icons/SketchStrokeIcon';
import { SolidStrokeIcon } from './icons/SolidStrokeIcon';
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.createElement(StrokeWeightSmallIcon, {
    color: "var(--ds-icon-subtle, #505258)",
    label: iconProps.label
  });
};
var MediumWeightIcon = function MediumWeightIcon(iconProps) {
  return /*#__PURE__*/React.createElement(StrokeWeightMediumIcon, {
    color: "var(--ds-icon-subtle, #505258)",
    label: iconProps.label
  });
};
var LargeWeightIcon = function LargeWeightIcon(iconProps) {
  return /*#__PURE__*/React.createElement(StrokeWeightLargeIcon, {
    color: "var(--ds-icon-subtle, #505258)",
    label: iconProps.label
  });
};
var weightOptions = [{
  icon: SmallWeightIcon,
  label: messages.smallDivider,
  value: 1
}, {
  icon: MediumWeightIcon,
  label: messages.mediumDivider,
  value: 2
}, {
  icon: LargeWeightIcon,
  label: messages.largeDivider,
  value: 3
}];
var styleOptionRows = [
// row 1
[{
  icon: SolidStrokeIcon,
  label: messages.solidDivider,
  value: 'solid'
}, {
  icon: DashedStrokeIcon,
  label: messages.dashedDivider,
  value: 'dashed'
}, {
  icon: DottedStrokeIcon,
  label: messages.dottedDivider,
  value: 'dotted'
}],
// row 2
[{
  icon: SketchStrokeIcon,
  label: messages.sketchDivider,
  value: 'sketch'
}, {
  icon: FadeStrokeIcon,
  label: messages.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 = useCallback(function () {
    return onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
  }, [onSelect, value]);
  return /*#__PURE__*/React.createElement("div", {
    className: ax(["_2rko1mok _16jlkb7n _1vy41mok _ug5l1h6o _r55q1osq", !isExperimentEnabled('platform_editor_lovability_dividers_patch_1') && "_1reo15vq _18m915vq"])
  }, /*#__PURE__*/React.createElement(IconButton, {
    autoFocus: autoFocus,
    icon: icon,
    isSelected: isSelected,
    label: label,
    onClick: handleClick,
    onKeyDownCapture: onKeyDownCapture
  }));
};
export var DividerOptions = function DividerOptions(_ref2) {
  var onStyleChange = _ref2.onStyleChange,
    onWeightChange = _ref2.onWeightChange,
    style = _ref2.style,
    weight = _ref2.weight;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var _useContext = useContext(ReactEditorViewContext),
    popupsMountPoint = _useContext.popupsMountPoint;
  var containerRef = useRef(null);
  var handleKeyDown = 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 : DEFAULT_DIVIDER_STYLE;
  var selectedWeight = weight !== null && weight !== void 0 ? weight : DEFAULT_DIVIDER_WEIGHT;
  var isPatchEnabled = isExperimentEnabled('platform_editor_lovability_dividers_patch_1');
  return /*#__PURE__*/React.createElement(Box, {
    xcss: styles.container,
    ref: isPatchEnabled ? containerRef : undefined,
    role: isPatchEnabled ? 'group' : undefined,
    "aria-label": isPatchEnabled ? formatMessage(messages.dividerOptions) : undefined
  }, /*#__PURE__*/React.createElement(Box, {
    xcss: styles.section
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "bold",
    color: "color.text.subtle"
  }, formatMessage(messages.weight)), /*#__PURE__*/React.createElement(Box, {
    xcss: styles.dividerOptionsButtonContainer
  }, /*#__PURE__*/React.createElement(Box, {
    xcss: styles.dividerOptionsContainer
  }, weightOptions.map(function (_ref3) {
    var icon = _ref3.icon,
      label = _ref3.label,
      value = _ref3.value;
    return /*#__PURE__*/React.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.createElement(Box, {
    xcss: styles.section
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "bold",
    color: "color.text.subtle"
  }, formatMessage(messages.style)), styleOptionRows.map(function (options) {
    return /*#__PURE__*/React.createElement(Box, {
      key: options[0].value,
      xcss: styles.dividerOptionsButtonContainer
    }, /*#__PURE__*/React.createElement(Box, {
      xcss: styles.dividerOptionsContainer
    }, options.map(function (_ref4) {
      var icon = _ref4.icon,
        label = _ref4.label,
        value = _ref4.value;
      return /*#__PURE__*/React.createElement(DividerOptionButton, {
        key: value,
        icon: icon,
        isSelected: selectedStyle === value,
        label: formatMessage(label),
        onKeyDownCapture: isPatchEnabled ? handleKeyDown : undefined,
        onSelect: onStyleChange,
        value: value
      });
    })));
  })));
};