@lyra/form-builder/lib/inputs/BlockEditor/Toolbar/Toolbar.js

Lyra form builder

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactClickOutside = require('react-click-outside');

var _reactClickOutside2 = _interopRequireDefault(_reactClickOutside);

var _reactContainerQuery = require('react-container-query');

var _reactTippy = require('react-tippy');

var _angleDownIcon = require('part:@lyra/base/angle-down-icon');

var _angleDownIcon2 = _interopRequireDefault(_angleDownIcon);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _chevronDownIcon = require('part:@lyra/base/chevron-down-icon');

var _chevronDownIcon2 = _interopRequireDefault(_chevronDownIcon);

var _closeIcon = require('part:@lyra/base/close-icon');

var _closeIcon2 = _interopRequireDefault(_closeIcon);

var _fullscreenIcon = require('part:@lyra/base/fullscreen-icon');

var _fullscreenIcon2 = _interopRequireDefault(_fullscreenIcon);

var _list = require('part:@lyra/components/validation/list');

var _list2 = _interopRequireDefault(_list);

var _warningIcon = require('part:@lyra/base/warning-icon');

var _warningIcon2 = _interopRequireDefault(_warningIcon);

var _AnnotationButtons = require('./AnnotationButtons');

var _AnnotationButtons2 = _interopRequireDefault(_AnnotationButtons);

var _BlockStyleSelect = require('./BlockStyleSelect');

var _BlockStyleSelect2 = _interopRequireDefault(_BlockStyleSelect);

var _DecoratorButtons = require('./DecoratorButtons');

var _DecoratorButtons2 = _interopRequireDefault(_DecoratorButtons);

var _InsertMenu = require('./InsertMenu');

var _InsertMenu2 = _interopRequireDefault(_InsertMenu);

var _ListItemButtons = require('./ListItemButtons');

var _ListItemButtons2 = _interopRequireDefault(_ListItemButtons);

var _isMac = require('../utils/isMac');

var _isMac2 = _interopRequireDefault(_isMac);

var _Toolbar = require('./styles/Toolbar.css');

var _Toolbar2 = _interopRequireDefault(_Toolbar);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* eslint-disable complexity */

/*:: import type {
  BlockContentFeatures,
  SlateValue,
  SlateChange,
  Type
} from '../typeDefs'*/
/*:: type Props = {
  blockContentFeatures: BlockContentFeatures,
  editorValue: SlateValue,
  focusPath: [],
  fullscreen: boolean,
  onChange: (change: SlateChange) => void,
  onFocus: (nextPath: []) => void,
  onToggleFullScreen: void => void,
  markers: [],
  style: {},
  type: Type
}*/
/*:: type State = {
  expanded: boolean,
  showValidationTooltip: boolean
}*/


const query = {
  [_Toolbar2.default.largeContainer]: {
    minWidth: 600
  }
};

class Toolbar extends _react2.default.PureComponent /*:: <Props, State>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      expanded: false,
      showValidationTooltip: false
    }, this.handleExpand = () => {
      this.setState({
        expanded: true
      });
    }, this.handleContract = () => {
      this.setState({
        expanded: false
      });
    }, this.handleClickOutside = () => {
      this.setState({
        expanded: false
      });
    }, this.handleFocus = (focusPath /*: []*/) => {
      const onFocus = this.props.onFocus;

      onFocus(focusPath);
    }, this.handleCloseValidationResults = () => {
      this.setState({ showValidationTooltip: false });
    }, this.handleToggleValidationResults = () => {
      this.setState(prevState => ({
        showValidationTooltip: !prevState.showValidationTooltip
      }));
    }, _temp;
  }

  render() {
    var _props = this.props;
    const blockContentFeatures = _props.blockContentFeatures,
          editorValue = _props.editorValue,
          focusPath = _props.focusPath,
          fullscreen = _props.fullscreen,
          markers = _props.markers,
          onChange = _props.onChange,
          onFocus = _props.onFocus,
          onToggleFullScreen = _props.onToggleFullScreen,
          style = _props.style,
          type = _props.type;
    var _state = this.state;
    const expanded = _state.expanded,
          showValidationTooltip = _state.showValidationTooltip;


    const insertItems = blockContentFeatures.types.inlineObjects.concat(blockContentFeatures.types.blockObjects);

    const validation = markers.filter(marker => marker.type === 'validation');
    const errors = validation.filter(marker => marker.level === 'error');
    const warnings = validation.filter(marker => marker.level === 'warning');

    return _react2.default.createElement(
      _reactContainerQuery.ContainerQuery,
      { query: query },
      params => _react2.default.createElement(
        'div',
        {
          className: `
              ${_Toolbar2.default.root}
              ${(0, _classnames2.default)(params)}
              ${fullscreen ? ` ${_Toolbar2.default.fullscreen}` : ''}
            `,
          style: style
        },
        _react2.default.createElement(
          'div',
          { className: _Toolbar2.default.primary },
          _react2.default.createElement(
            'div',
            {
              className: _Toolbar2.default.blockFormatContainer,
              onClick: this.handleContract
            },
            _react2.default.createElement(_BlockStyleSelect2.default, {
              blockContentFeatures: blockContentFeatures,
              editorValue: editorValue,
              onChange: onChange
            })
          ),
          _react2.default.createElement(
            _default2.default,
            {
              className: _Toolbar2.default.expandButton,
              onClick: this.handleExpand,
              kind: 'simple'
            },
            'More\xA0',
            _react2.default.createElement(
              'span',
              { className: _Toolbar2.default.arrow },
              _react2.default.createElement(_angleDownIcon2.default, { color: 'inherit' })
            )
          ),
          _react2.default.createElement(
            'div',
            {
              className: `${_Toolbar2.default.compactable} ${expanded ? _Toolbar2.default.expanded : ''}`
            },
            blockContentFeatures.decorators.length > 0 && _react2.default.createElement(
              'div',
              { className: _Toolbar2.default.decoratorButtonsContainer },
              _react2.default.createElement(_DecoratorButtons2.default, {
                blockContentFeatures: blockContentFeatures,
                editorValue: editorValue,
                onChange: onChange
              })
            ),
            blockContentFeatures.lists.length > 0 && _react2.default.createElement(
              'div',
              { className: _Toolbar2.default.decoratorButtonsContainer },
              _react2.default.createElement(_ListItemButtons2.default, {
                blockContentFeatures: blockContentFeatures,
                editorValue: editorValue,
                onChange: onChange
              })
            ),
            blockContentFeatures.annotations.length > 0 && _react2.default.createElement(
              'div',
              { className: _Toolbar2.default.annotationButtonsContainer },
              _react2.default.createElement(_AnnotationButtons2.default, {
                blockContentFeatures: blockContentFeatures,
                editorValue: editorValue,
                focusPath: focusPath,
                onChange: onChange,
                onFocus: onFocus
              })
            ),
            insertItems.length > 0 && _react2.default.createElement(
              'div',
              { className: _Toolbar2.default.insertContainer },
              _react2.default.createElement(_InsertMenu2.default, {
                blockTypes: blockContentFeatures.types.blockObjects,
                editorValue: editorValue,
                inlineTypes: blockContentFeatures.types.inlineObjects,
                onChange: onChange,
                onFocus: onFocus,
                type: type
              })
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: _Toolbar2.default.secondary },
          fullscreen && (errors.length > 0 || warnings.length > 0) && _react2.default.createElement(
            _reactTippy.Tooltip,
            {
              arrow: true,
              duration: 100,
              html: _react2.default.createElement(_list2.default, {
                markers: validation,
                showLink: true,
                isOpen: showValidationTooltip,
                documentType: type,
                onClose: this.handleCloseValidationResults,
                onFocus: this.handleFocus
              }),
              interactive: true,
              onRequestClose: this.handleCloseValidationResults,
              open: showValidationTooltip,
              position: 'bottom',
              style: { padding: 0 },
              theme: 'light noPadding',
              trigger: 'click'
            },
            _react2.default.createElement(
              _default2.default,
              {
                color: 'danger',
                icon: _warningIcon2.default,
                kind: 'simple',
                onClick: this.handleToggleValidationResults,
                padding: 'small'
              },
              errors.length,
              _react2.default.createElement(
                'span',
                { style: { paddingLeft: '0.5em' } },
                _react2.default.createElement(_chevronDownIcon2.default, null)
              )
            )
          ),
          _react2.default.createElement(
            'div',
            {
              className: _Toolbar2.default.fullscreenButtonContainer,
              onClick: this.handleContract
            },
            _react2.default.createElement(_default2.default, {
              kind: 'simple',
              onClick: onToggleFullScreen,
              title: `Open in fullscreen (${_isMac2.default ? 'cmd' : 'ctrl'}+enter)`,
              icon: fullscreen ? _closeIcon2.default : _fullscreenIcon2.default
            })
          )
        )
      )
    );
  }
}

exports.default = (0, _reactClickOutside2.default)(Toolbar);