@formant/ava-react/esm/NarrativeTextVis/section/index.js

React components of AVA.

var _excluded = ["spec", "size", "theme", "palette", "pluginManager", "showCollapse"],
  _excluded2 = ["onClickSection", "onMouseEnterSection", "onMouseLeaveSection"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from 'react';
import { isCustomSection, isStandardSection } from '@formant/ava';
import { v4 } from 'uuid';
import { isFunction } from 'lodash';
import { NTV_PREFIX_CLS } from "../constants";
import { presetPluginManager } from "../chore/plugin";
import { classnames as cx } from "../../utils";
import { Paragraph } from "../paragraph";
import { Container } from "../styled";
export function Section(_ref) {
  var spec = _ref.spec,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'normal' : _ref$size,
    _ref$theme = _ref.theme,
    theme = _ref$theme === void 0 ? 'dark' : _ref$theme,
    palette = _ref.palette,
    _ref$pluginManager = _ref.pluginManager,
    pluginManager = _ref$pluginManager === void 0 ? presetPluginManager : _ref$pluginManager,
    _ref$showCollapse = _ref.showCollapse,
    showCollapse = _ref$showCollapse === void 0 ? false : _ref$showCollapse,
    events = _objectWithoutProperties(_ref, _excluded);
  var themeStyles = {
    size: size,
    theme: theme,
    palette: palette
  };
  var _ref2 = events || {},
    onClickSection = _ref2.onClickSection,
    onMouseEnterSection = _ref2.onMouseEnterSection,
    onMouseLeaveSection = _ref2.onMouseLeaveSection,
    paragraphEvents = _objectWithoutProperties(_ref2, _excluded2);
  var onClick = function onClick() {
    onClickSection === null || onClickSection === void 0 || onClickSection(spec);
  };
  var onMouseEnter = function onMouseEnter() {
    onMouseEnterSection === null || onMouseEnterSection === void 0 || onMouseEnterSection(spec);
  };
  var onMouseLeave = function onMouseLeave() {
    onMouseLeaveSection === null || onMouseLeaveSection === void 0 || onMouseLeaveSection(spec);
  };
  var renderCustomSection = function renderCustomSection() {
    if (isCustomSection(spec)) {
      var descriptor = pluginManager.getBlockDescriptor(spec.customType);
      if (descriptor && isFunction(descriptor === null || descriptor === void 0 ? void 0 : descriptor.render)) {
        return descriptor.render(spec, themeStyles);
      }
    }
    return null;
  };
  return /*#__PURE__*/React.createElement(Container, _extends({
    as: "section"
  }, themeStyles, {
    className: cx("".concat(NTV_PREFIX_CLS, "-section"), spec.className),
    style: spec.styles,
    onClick: onClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  }), renderCustomSection(), isStandardSection(spec) && spec.paragraphs.map(function (p) {
    return /*#__PURE__*/React.createElement(Paragraph, _extends({
      key: p.key || v4(),
      spec: p,
      pluginManager: pluginManager,
      showCollapse: showCollapse
    }, themeStyles, paragraphEvents));
  }));
}