function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys.push.apply(ownKeys, Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/* eslint-disable consistent-return */
import classNames from 'classnames';
import React from 'react';
import { deviceTypeMap } from '../../../constants';
import { componentMap } from '../../component-types';
import './index.less';
export default function ViewArea(_ref) {
  var device = _ref.device,
      renderHeader = _ref.renderHeader,
      pageData = _ref.pageData,
      selected = _ref.selected;
  return /*#__PURE__*/React.createElement("div", {
    className: "design-area-wrap"
  }, renderHeader(), /*#__PURE__*/React.createElement("div", {
    className: device === deviceTypeMap.PC ? 'pc_view_area' : 'phone_view_area'
  }, /*#__PURE__*/React.createElement("div", {
    className: "device_border"
  }, pageData && pageData.map(function (nodeData) {
    var Clazz = componentMap[nodeData.type];

    if (!Clazz) {
      console.error("[MagicBox] Can not find type ".concat(nodeData.type));
      return;
    }

    var newInstanceProps = _objectSpread({}, nodeData, {
      nodeData: nodeData,
      mode: 'designer',
      terminalType: device
    });

    return /*#__PURE__*/React.createElement("div", {
      key: nodeData.id,
      id: "view".concat(nodeData.id),
      className: classNames({
        active_node: nodeData.id === selected.id
      })
    }, React.createElement(Clazz, _objectSpread({}, newInstanceProps), null));
  }))));
}