@atlaskit/editor-plugin-rule/dist/es2019/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';
const styles = {
  container: "_18zrutpp _4t3i5jys",
  section: "_1rjc1b66",
  dividerOptionsContainer: "_zulpu2gc _1e0c1txw _1bsb1osq",
  dividerOptionsButtonContainer: "_1rjc1b66"
};
const dividerOptionsButtonStyles = null;
const dividerOptionsButtonStylesOld = null;
const SmallWeightIcon = iconProps => /*#__PURE__*/React.createElement(StrokeWeightSmallIcon, {
  color: "var(--ds-icon-subtle, #505258)",
  label: iconProps.label
});
const MediumWeightIcon = iconProps => /*#__PURE__*/React.createElement(StrokeWeightMediumIcon, {
  color: "var(--ds-icon-subtle, #505258)",
  label: iconProps.label
});
const LargeWeightIcon = iconProps => /*#__PURE__*/React.createElement(StrokeWeightLargeIcon, {
  color: "var(--ds-icon-subtle, #505258)",
  label: iconProps.label
});
const weightOptions = [{
  icon: SmallWeightIcon,
  label: messages.smallDivider,
  value: 1
}, {
  icon: MediumWeightIcon,
  label: messages.mediumDivider,
  value: 2
}, {
  icon: LargeWeightIcon,
  label: messages.largeDivider,
  value: 3
}];
const 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'
}]];
const DividerOptionButton = ({
  autoFocus,
  icon,
  isSelected,
  label,
  onKeyDownCapture,
  onSelect,
  value
}) => {
  const handleClick = useCallback(() => 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 const DividerOptions = ({
  onStyleChange,
  onWeightChange,
  style,
  weight
}) => {
  const {
    formatMessage
  } = useIntl();
  const {
    popupsMountPoint
  } = useContext(ReactEditorViewContext);
  const containerRef = useRef(null);
  const handleKeyDown = useCallback(event => {
    var _containerRef$current, _containerRef$current2, _buttons$nextIndex;
    const 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 : []);
    const index = buttons.indexOf(event.currentTarget);
    if (index === -1) {
      return;
    }
    const columns = weightOptions.length;
    const row = Math.floor(index / columns);
    const column = index % columns;
    const rows = [weightOptions, ...styleOptionRows];
    let nextIndex;
    switch (event.key) {
      case 'ArrowDown':
      case 'ArrowUp':
        {
          const 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 ? void 0 : _buttons$nextIndex.focus();
  }, []);
  const selectedStyle = style !== null && style !== void 0 ? style : DEFAULT_DIVIDER_STYLE;
  const selectedWeight = weight !== null && weight !== void 0 ? weight : DEFAULT_DIVIDER_WEIGHT;
  const 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(({
    icon,
    label,
    value
  }) => /*#__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(options => /*#__PURE__*/React.createElement(Box, {
    key: options[0].value,
    xcss: styles.dividerOptionsButtonContainer
  }, /*#__PURE__*/React.createElement(Box, {
    xcss: styles.dividerOptionsContainer
  }, options.map(({
    icon,
    label,
    value
  }) => /*#__PURE__*/React.createElement(DividerOptionButton, {
    key: value,
    icon: icon,
    isSelected: selectedStyle === value,
    label: formatMessage(label),
    onKeyDownCapture: isPatchEnabled ? handleKeyDown : undefined,
    onSelect: onStyleChange,
    value: value
  })))))));
};