render()

in packages/editor-skeleton/src/components/settings/settings-pane.tsx [211:286]


  render() {
    const field = this.field;
    const { extraProps } = field;
    const visible = this.visible;

    if (!visible) {
      return null;
    }

    const {
      setterProps = {},
      setterType,
      initialValue = null,
    } = this.setterInfo;

    const value = this.value;

    let onChangeAPI = extraProps?.onChange;
    let stageName = this.stageName;

    return createField(
      {
        meta: field?.componentMeta?.npm || field?.componentMeta?.componentName || '',
        title: field.title,
        // editor: field.editor,
        collapsed: !field.expanded,
        valueState: field.isRequired ? 10 : field.valueState,
        onExpandChange: (expandState) => field.setExpanded(expandState),
        onClear: () => field.clearValue(),
        // field: field,
        // stages,
        stageName,
        ...extraProps,
      },
      !stageName &&
      this.setters?.createSetterContent(setterType, {
        ...shallowIntl(setterProps),
        forceInline: extraProps.forceInline,
        key: field.id,
        // === injection
        prop: field.internalToShellField(), // for compatible vision
        selected: field.top?.getNode()?.internalToShellNode(),
        field: field.internalToShellField(),
        // === IO
        value, // reaction point
        initialValue,
        onChange: (value: any) => {
          this.setState({
            fromOnChange: true,
            // eslint-disable-next-line react/no-unused-state
            value,
          });
          field.setValue(value, true);
          if (onChangeAPI) onChangeAPI(value, field.internalToShellField());
        },
        onInitial: () => {
          if (initialValue == null) {
            return;
          }
          const value = typeof initialValue === 'function' ? initialValue(field.internalToShellField()) : initialValue;
          this.setState({
            // eslint-disable-next-line react/no-unused-state
            value,
          });
          field.setValue(value, true);
        },

        removeProp: () => {
          if (field.name) {
            field.parent.clearPropValue(field.name);
          }
        },
      }),
      extraProps.forceInline ? 'plain' : extraProps.display,
    );
  }