@riil-frontend/component-page-config/lib/components/uicbb-container/AttributesPanel.js

page config 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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

var _next = require("@formily/next");

var _lodash = _interopRequireDefault(require("lodash"));

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

var _componentNoDataPage = _interopRequireDefault(require("@riil-frontend/component-no-data-page"));

require("../attr-panel/AttrContents/ComponentContent.scss");

var _FormCollapse = require("../attr-panel/AttrContents/FormCollapse");

var _componentFooterLayout = _interopRequireDefault(require("@riil-frontend/component-footer-layout"));

require("./AttributesPanel.scss");

var actions = (0, _next.createAsyncFormActions)();

var AttributesPanel = function AttributesPanel(props) {
  var getSchema = props.getSchema,
      CustomScCom = props.CustomScCom,
      pageProps = props.pageProps,
      config = props.config,
      request = props.request,
      configVisible = props.configVisible,
      setConfigVisible = props.setConfigVisible,
      onConfigChange = props.onConfigChange,
      target = props.target;

  var _useState = (0, _react.useState)({
    schema: null,
    customScCom: CustomScCom,
    configState: config
  }),
      schemaProps = _useState[0],
      setSchemaProps = _useState[1];

  var init = /*#__PURE__*/function () {
    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
      var schema;
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return getSchema({
                pageProps: pageProps,
                config: config,
                request: request
              });

            case 2:
              schema = _context.sent;
              setSchemaProps({
                schema: schema,
                customScCom: CustomScCom,
                configState: config
              });

            case 4:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function init() {
      return _ref.apply(this, arguments);
    };
  }();

  (0, _react.useEffect)(function () {
    init();
  }, []);
  (0, _react.useEffect)(function () {
    valdates();
  }, [schemaProps.configState]);

  var valdates = /*#__PURE__*/function () {
    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
      var result;
      return _regenerator["default"].wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _context2.next = 2;
              return actions.validate().then(function () {
                return true;
              })["catch"](function () {
                return false;
              });

            case 2:
              result = _context2.sent;

              if (result) {
                onConfigChange(schemaProps.configState);
              } // return result;


            case 4:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));

    return function valdates() {
      return _ref2.apply(this, arguments);
    };
  }();

  var onOk = /*#__PURE__*/function () {
    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
      var val;
      return _regenerator["default"].wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              _context3.next = 2;
              return valdates();

            case 2:
              val = _context3.sent;

              if (val) {
                onConfigChange(schemaProps.configState);
                setConfigVisible(false);
              }

            case 4:
            case "end":
              return _context3.stop();
          }
        }
      }, _callee3);
    }));

    return function onOk() {
      return _ref3.apply(this, arguments);
    };
  }();

  var onCancel = function onCancel() {
    setConfigVisible(false);
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "footer-drawer",
    onMouseDown: function onMouseDown(e) {
      e.stopPropagation();
    }
  }, /*#__PURE__*/_react["default"].createElement(_next.SchemaForm, {
    key: schemaProps.configState.id,
    components: (0, _extends2["default"])({
      FormCollapse: _FormCollapse.FormCollapse,
      FormCollapsePanel: _FormCollapse.FormCollapsePanel
    }, schemaProps.customScCom),
    style: {
      width: '100%'
    },
    actions: actions,
    value: schemaProps.configState.attributes,
    onChange: function onChange(values) {
      var _config = _lodash["default"].cloneDeep(schemaProps.configState);

      _config.attributes = (0, _extends2["default"])({}, _config.attributes, values);
      setSchemaProps((0, _extends2["default"])({}, schemaProps, {
        configState: _config
      })); // valdates2(_config) TODO
    },
    schema: schemaProps.schema
  }));
};

var _default = AttributesPanel;
exports["default"] = _default;