jjb-lc-designable/react-settings-form/SettingsForm.js

基于alibaba-designable源码二次封装的表单设计器。

import React, { useMemo } from 'react';
import { createForm } from 'jjb-lc-formily/core';
import { Form } from 'jjb-lc-formily/antd';
import { observer } from 'jjb-lc-formily/react';
import { requestIdle, cancelIdle } from 'jjb-lc-designable/shared';
import { usePrefix, useSelected, useOperation, useSelectedNode, useWorkbench, IconWidget, NodePathWidget } from 'jjb-lc-designable/react';
import { SchemaField } from './SchemaField';
import { SettingsFormContext } from './shared/context';
import { useLocales, useSnapshot } from './effects';
import { Empty } from 'antd';
import cls from 'classnames';
import './styles.less';
const GlobalState = {
  idleRequest: null
};
export const SettingsForm = observer(props => {
  const workbench = useWorkbench();
  const currentWorkspace = workbench?.activeWorkspace || workbench?.currentWorkspace;
  const currentWorkspaceId = currentWorkspace?.id;
  const operation = useOperation(currentWorkspaceId);
  const node = useSelectedNode(currentWorkspaceId);
  const selected = useSelected(currentWorkspaceId);
  const prefix = usePrefix('settings-form');
  const schema = node?.designerProps?.propsSchema;
  const isEmpty = !(node && node.designerProps?.propsSchema && selected.length === 1);
  const form = useMemo(() => {
    return createForm({
      initialValues: node?.designerProps?.defaultProps,
      values: node?.props,
      effects(form) {
        useLocales(node);
        useSnapshot(operation);
        props.effects?.(form);
      }
    });
  }, [node, node?.props, schema, operation, isEmpty]);
  const render = () => {
    if (!isEmpty) {
      return /*#__PURE__*/React.createElement("div", {
        className: cls(prefix, props.className),
        style: props.style,
        key: node.id
      }, /*#__PURE__*/React.createElement(SettingsFormContext.Provider, {
        value: props
      }, /*#__PURE__*/React.createElement(Form, {
        form: form,
        colon: false,
        labelWidth: 120,
        labelAlign: "left",
        wrapperAlign: "right",
        feedbackLayout: "none",
        tooltipLayout: "text"
      }, /*#__PURE__*/React.createElement(SchemaField, {
        schema: schema,
        components: props.components,
        scope: {
          $node: node,
          ...props.scope
        }
      }))));
    }
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + '-empty'
    }, /*#__PURE__*/React.createElement(Empty, null));
  };
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(IconWidget.Provider, {
      tooltip: true
    }, /*#__PURE__*/React.createElement("div", {
      className: prefix + '-wrapper'
    }, !isEmpty && /*#__PURE__*/React.createElement(NodePathWidget, {
      workspaceId: currentWorkspaceId
    }), /*#__PURE__*/React.createElement("div", {
      className: prefix + '-content'
    }, render())))
  );
}, {
  scheduler: update => {
    cancelIdle(GlobalState.idleRequest);
    GlobalState.idleRequest = requestIdle(update, {
      timeout: 500
    });
  }
});