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

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

import _extends from "@babel/runtime/helpers/extends";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo } from 'react';
import { SchemaForm, createAsyncFormActions } from '@formily/next';
import _ from 'lodash';
import PropTypes from 'prop-types';
import NoDataCom from '@riil-frontend/component-no-data-page';
import '../attr-panel/AttrContents/ComponentContent.scss';
import { FormCollapse, FormCollapsePanel } from '../attr-panel/AttrContents/FormCollapse';
import FooterLayout from '@riil-frontend/component-footer-layout';
import './AttributesPanel.scss';
var actions = 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 = useState({
    schema: null,
    customScCom: CustomScCom,
    configState: config
  }),
      schemaProps = _useState[0],
      setSchemaProps = _useState[1];

  var init = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var schema;
      return _regeneratorRuntime.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);
    };
  }();

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

  var valdates = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      var result;
      return _regeneratorRuntime.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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
      var val;
      return _regeneratorRuntime.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.createElement("div", {
    className: "footer-drawer",
    onMouseDown: function onMouseDown(e) {
      e.stopPropagation();
    }
  }, /*#__PURE__*/React.createElement(SchemaForm, {
    key: schemaProps.configState.id,
    components: _extends({
      FormCollapse: FormCollapse,
      FormCollapsePanel: FormCollapsePanel
    }, schemaProps.customScCom),
    style: {
      width: '100%'
    },
    actions: actions,
    value: schemaProps.configState.attributes,
    onChange: function onChange(values) {
      var _config = _.cloneDeep(schemaProps.configState);

      _config.attributes = _extends({}, _config.attributes, values);
      setSchemaProps(_extends({}, schemaProps, {
        configState: _config
      })); // valdates2(_config) TODO
    },
    schema: schemaProps.schema
  }));
};

export default AttributesPanel;