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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _nav = _interopRequireDefault(require("@alifd/next/lib/nav"));

var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));

var _react = _interopRequireWildcard(require("react"));

var _utils = require("@riil-frontend/utils");

var _propTypes = _interopRequireDefault(require("prop-types"));

require("./HorizontalLayoutView.scss");

var _dragPanel = _interopRequireDefault(require("../drag-panel"));

var _util = require("../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 = (0, _react.useState)(),
      parentDOM = _useState[0],
      setParentDOM = _useState[1];

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

  var hasData = appPageConfig && (0, _utils.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);
  });
  (0, _react.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["default"].createElement(_react["default"].Fragment, null, hasData ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "work-bench-view-wrap"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "nav-parent"
  }, /*#__PURE__*/_react["default"].createElement(_nav["default"], {
    selectedKeys: selectBySelf ? [selfSelectId] : [selectId],
    style: {
      minWidth: 'unset'
    },
    direction: "ver",
    type: "normal",
    onSelect: function onSelect(selectedKeys) {
      if (selectBySelf) {
        setSelfSelectId(selectedKeys[0]);
      } else {
        setSelectId(selectedKeys[0]);
      }

      (0, _util.dispatchResizeEvent)(500);
    },
    className: "work-bench-nav"
  }, appPageConfig.configs.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_nav["default"].Item, {
      key: item.pageId
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "work-bench-nav-item"
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: item.icon
    }), item.pageName));
  }))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "work-bench-view-content",
    ref: function ref(node) {
      setParentDOM(node);
    }
  }, /*#__PURE__*/_react["default"].createElement(_dragPanel["default"], {
    hideComList: hideComList,
    parentDOM: parentDOM,
    pageConfig: currentConfig,
    isEdit: false,
    pageProps: pageProps,
    request: request,
    jumpto: jumpto,
    onChange: function onChange(widgets, callback) {
      _onChange((0, _extends2["default"])({}, currentConfig, {
        widgets: widgets
      }), callback);
    },
    customGetComRequire: customGetComRequire
  }))) : null);
}

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

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

  /**
   * 模板数据
   */
  appPageConfig: _propTypes["default"].object,

  /**
   * 页面参数
   */
  pageProps: _propTypes["default"].object,

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