@riil-frontend/component-page-creater/es/components/view-layout/HorizontalLayoutView.js

page creater components,include components list,component attribute panel and page canvas

import _extends from "@babel/runtime/helpers/extends";
import _Nav from "@alifd/next/es/nav";
import _Icon from "@alifd/next/es/icon";
import React, { useState, useEffect } from 'react';
import { isAvailableArray } from '@riil-frontend/utils';
import PropTypes from 'prop-types';
import './HorizontalLayoutView.scss';
import DragLayoutCanvas from '../drag-panel';
import { dispatchResizeEvent } from '../util';

function HorizontalLayoutView(props) {
  var _appPageConfig$config;

  var setSelectId = props.setSelectId,
      appPageConfig = props.appPageConfig,
      selectId = props.selectId,
      pageProps = props.pageProps,
      _onChange = props.onChange,
      request = props.request,
      jumpto = props.jumpto,
      customGetComRequire = props.customGetComRequire,
      hideComList = props.hideComList; //如果属性中没有setSelectId 和 selectId。则组件选择状态为非受控

  var selectBySelf = !('setSelectId' in props && 'selectId' in props);

  var _useState = useState(),
      parentDOM = _useState[0],
      setParentDOM = _useState[1];

  var _useState2 = useState(null),
      selfSelectId = _useState2[0],
      setSelfSelectId = _useState2[1];

  var hasData = appPageConfig && isAvailableArray(appPageConfig.configs);
  var currentConfig = appPageConfig === null || appPageConfig === void 0 ? void 0 : (_appPageConfig$config = appPageConfig.configs) === null || _appPageConfig$config === void 0 ? void 0 : _appPageConfig$config.find(function (item) {
    return item.pageId === (selectBySelf ? selfSelectId : selectId);
  });
  useEffect(function () {
    if (!selfSelectId && selectBySelf) {
      var _appPageConfig$config2;

      setSelfSelectId(appPageConfig === null || appPageConfig === void 0 ? void 0 : (_appPageConfig$config2 = appPageConfig.configs[0]) === null || _appPageConfig$config2 === void 0 ? void 0 : _appPageConfig$config2.pageId);
    }
  }, [appPageConfig]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, hasData ? /*#__PURE__*/React.createElement("div", {
    className: "work-bench-view-wrap"
  }, /*#__PURE__*/React.createElement("div", {
    className: "nav-parent"
  }, /*#__PURE__*/React.createElement(_Nav, {
    selectedKeys: selectBySelf ? [selfSelectId] : [selectId],
    style: {
      minWidth: 'unset'
    },
    direction: "ver",
    type: "normal",
    onSelect: function onSelect(selectedKeys) {
      if (selectBySelf) {
        setSelfSelectId(selectedKeys[0]);
      } else {
        setSelectId(selectedKeys[0]);
      }

      dispatchResizeEvent(500);
    },
    className: "work-bench-nav"
  }, appPageConfig.configs.map(function (item, index) {
    return /*#__PURE__*/React.createElement(_Nav.Item, {
      key: item.pageId
    }, /*#__PURE__*/React.createElement("div", {
      className: "work-bench-nav-item"
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: item.icon
    }), item.pageName));
  }))), /*#__PURE__*/React.createElement("div", {
    className: "work-bench-view-content",
    ref: function ref(node) {
      setParentDOM(node);
    }
  }, /*#__PURE__*/React.createElement(DragLayoutCanvas, {
    hideComList: hideComList,
    parentDOM: parentDOM,
    pageConfig: currentConfig,
    isEdit: false,
    pageProps: pageProps,
    request: request,
    jumpto: jumpto,
    onChange: function onChange(widgets, callback) {
      _onChange(_extends({}, currentConfig, {
        widgets: widgets
      }), callback);
    },
    customGetComRequire: customGetComRequire
  }))) : null);
}

HorizontalLayoutView.propTypes = {
  /**
   * 设置当前模板选中页id回调
   * 不填写此属性，则页面切换由内部实现
   */
  setSelectId: PropTypes.func,

  /**
   * 当前模板显示页面id
   * 不填写此属性，则页面切换由内部实现
   */
  selectId: PropTypes.string,

  /**
   * 模板数据
   */
  appPageConfig: PropTypes.object,

  /**
   * 页面参数
   */
  pageProps: PropTypes.object,

  /**
   * 页面配置触发回调
   */
  onChange: PropTypes.func,
  jumpto: PropTypes.func,
  request: PropTypes.any,
  customGetComRequire: PropTypes.func,
  hideComList: PropTypes.array
};
HorizontalLayoutView.defaultProps = {
  hideComList: []
};
export default HorizontalLayoutView;