redaktilo-toolbar/Toolbar.js

Redaktilo toolbar

import React from 'react';
import { useSlate } from 'slate-react';
import PropTypes from 'prop-types';
import cx from 'classnames';

import styles from './Toolbar.css';

const Toolbar = ({ className, buttons }) => {
  const editor = useSlate();

  return (
    <div className={className}>
      {buttons.map((group, groupIndex) => {
        if (group.length > 0) {
          return (
            <div key={groupIndex} className={styles.toolbarButtonGroup}>
              {group.map((button, index) => {
                const isHighlighted = button.isHighlighted(editor);
                const isDisabled = button.isDisabled(editor);
                const onButtonClick = event => {
                  event.preventDefault();
                  !isDisabled && button.onClick(event, editor);
                };

                return (
                  <button
                    className={cx(styles.toolbarButton, {
                      [styles.isHighlighted]: isHighlighted,
                    })}
                    data-testid={button['data-testid']}
                    key={index}
                    aria-label={button.label}
                    disabled={isDisabled}
                    onPointerDown={event => onButtonClick(event)}
                    onMouseDown={event => onButtonClick(event)}
                  >
                    {button.icon
                      ? button.icon({ className: cx({ isHighlighted }) })
                      : button.label}
                  </button>
                );
              })}
            </div>
          );
        } else {
          return null;
        }
      })}
    </div>
  );
};

Toolbar.defaultProps = {
  buttons: [],
};

Toolbar.propTypes = {
  className: PropTypes.string,
  buttons: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)),
};

export { Toolbar };