@chayns-components/core/lib/esm/components/sharing-bar/SharingBar.js

A set of beautiful React components for developing your own applications with chayns.

import React, { useCallback, useRef } from 'react';
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
import Icon from '../icon/Icon';
import { StyledSharingBar, StyledSharingBarIconWrapper, StyledSharingBarText } from './SharingBar.styles';
import SharingContextMenu from '../sharing-context-menu/SharingContextMenu';
const SharingBar = ({
  label,
  link,
  popupAlignment,
  container,
  shouldEnableKeyboardHighlighting
}) => {
  const colorScheme = useColorScheme();
  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
  const contextMenuRef = useRef(null);
  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
  const showContextMenu = useCallback(() => {
    contextMenuRef.current?.show();
  }, []);
  const handleSharingBarClick = useCallback(event => {
    event.preventDefault();
    event.stopPropagation();
    showContextMenu();
  }, [showContextMenu]);
  const handleKeyDown = useCallback(event => {
    if (event.currentTarget !== event.target) {
      return;
    }
    if (event.key !== 'Enter' && event.key !== ' ') {
      return;
    }
    event.preventDefault();
    event.stopPropagation();
    showContextMenu();
  }, [showContextMenu]);
  return /*#__PURE__*/React.createElement(StyledSharingBar, {
    onClick: handleSharingBarClick,
    onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
    tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : undefined,
    role: shouldEnableKeyboardHighlightingEffective ? 'button' : undefined,
    "data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting ? 'true' : undefined
  }, /*#__PURE__*/React.createElement(StyledSharingBarIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
    icons: ['fa fa-share-nodes']
  })), /*#__PURE__*/React.createElement(SharingContextMenu, {
    link: link,
    ref: contextMenuRef,
    alignment: popupAlignment,
    container: container,
    shouldDisableClick: true
  }, null), /*#__PURE__*/React.createElement(StyledSharingBarText, null, label));
};
SharingBar.displayName = 'SharingBar';
export default SharingBar;
//# sourceMappingURL=SharingBar.js.map